/* Blog Casa Feliz - artigo.
   CSS original das paginas estaticas, preservado sem alteracao. */

:root { --ink:#1f261f; --muted:#697263; --line:#e6e1d8; --paper:#fffdf8; --green-dark:#253d2a; --clay:#a45f45; --gold:#c19a58; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
a { color:var(--green-dark); text-decoration-thickness:1px; text-underline-offset:3px; }

/* Link do texto: sublinhado sempre visível, e no hover ele engrossa e muda para
   a cor de argila da marca. Nada se move, então a linha não pula. */
article a:not(.button):not(.related-card) {
    /* O verde-escuro do link era quase a cor do texto, então o link não se
       distinguia de uma palavra qualquer. A argila da marca separa os dois, e o
       sublinhado fica visível parado: link que só aparece no hover ninguém acha. */
    color: var(--clay);
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}

article a:not(.button):not(.related-card):hover,
article a:not(.button):not(.related-card):focus-visible {
    color: #83452f;
    text-decoration-thickness: 2px;
}

/* Dentro do bloco verde o texto é claro, então o link ali usa o dourado. */
.commercial a:not(.button) {
    color: var(--gold);
}

.commercial a:not(.button):hover {
    color: #e0c08a;
}

/* O índice lateral não é sublinhado: ele acende a cor e ganha um traço à
   esquerda, para o olho achar onde estava. */
.toc a { transition: color .18s ease, border-left-color .18s ease, padding-left .18s ease; border-left:2px solid transparent; padding-left:0; }
.toc a:hover,
.toc a:focus-visible { color: var(--green-dark); border-left-color: var(--clay); padding-left:10px; }

@media (prefers-reduced-motion: reduce) {
    article a, .toc a { transition: none; }
    .toc summary::after { transition: none; }
}
header { border-bottom:1px solid var(--line); background:rgba(255,253,248,.94); position:sticky; top:0; z-index:5; }
.nav { width:min(1120px, calc(100% - 32px)); margin:auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand img { height:46px; width:auto; display:block; }
nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; color:var(--muted); font-size:14px; font-weight:800; }
nav a { text-decoration:none; color:inherit; }
.article-shell { width:min(1080px, calc(100% - 32px)); margin:0 auto; }
.hero { padding:42px 0 26px; }
/* O caminho de volta é serviço, não título: em 13px e negrito 800 ele chegava
   com mais força que a linha de apoio do artigo. */
.crumbs { display:flex; gap:6px; flex-wrap:wrap; color:#8a9284; font-size:12px; font-weight:500; letter-spacing:.01em; margin-bottom:22px; }
.crumbs a { color:#8a9284; text-decoration:none; }
.crumbs a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
/* Uma serifada só na página, a Playfair Display, a mesma da lista do blog e do
   catálogo. A Georgia era fonte de sistema e engrossava todo título. */
h1, h2, h3 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; letter-spacing:0; color:#172015; }
h1 { max-width:820px; margin:0 0 14px; font-size:clamp(34px, 4.6vw, 54px); line-height:1.06; letter-spacing:-.015em; text-wrap:balance; }
.dek { max-width:760px; margin:0; color:var(--muted); font-size:19px; line-height:1.72; }
.cta-zero { margin:14px 0 0; max-width:760px; color:var(--muted); font-size:17px; line-height:1.72; }
/* A assinatura fecha a entrada: mesma cor do caminho de volta, um degrau abaixo
   do texto, com um risco por cima para separar sem pesar. */
.byline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); color:#8a9284; font-size:13px; font-weight:500; line-height:1.45; }
.byline span + span::before { content:""; display:inline-block; width:3px; height:3px; margin:0 8px 2px 0; border-radius:999px; background:#c9cfc2; }
.hero-image { width:100%; margin:30px 0 0; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.hero-image img { display:block; width:100%; max-height:560px; object-fit:cover; object-position:center; }
.content-layout { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:40px; align-items:start; padding:22px 0 72px; }
article { min-width:0; }
article p { color:#374033; font-size:18px; line-height:1.78; margin:0 0 18px; }
article h2 { margin:44px 0 14px; font-size:30px; line-height:1.16; }
article h3 { margin:26px 0 10px; font-size:22px; line-height:1.22; }
article ul, article ol { margin:0 0 20px; padding-left:22px; color:#374033; font-size:18px; line-height:1.7; }
article li { margin-bottom:8px; }
.summary { margin:30px 0 34px; padding:22px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.summary h2 { margin:0 0 12px; font-size:25px; }
.summary ul { margin-bottom:0; }
.section-image { margin:14px 0 20px; overflow:hidden; border-radius:8px; border:1px solid var(--line); background:#fff; }
.section-image img { display:block; width:100%; max-height:430px; object-fit:cover; }
.commercial { margin:38px 0 18px; padding:26px; border-radius:8px; background:var(--green-dark); color:#fff; }
.commercial h2 { margin:0 0 10px; color:#fff; font-size:30px; }
.commercial p, .commercial li { color:#edf5ec; }
.commercial ul { margin-bottom:18px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:6px; background:var(--gold); color:#1f261f; text-decoration:none; font-weight:700; }
.light-cta, .related-box { margin:42px 0; padding:22px; border:1px solid var(--line); border-radius:8px; background:#fff; }
/* o bloco de leituras fecha o artigo, então ele encosta mais no texto: 42px em
   cima abriam um vão maior que o espaço entre duas seções */
.related-box { margin-top:26px; }

/* Fecho do artigo, fora da coluna de leitura: é aqui que ficam as leituras
   relacionadas, na largura inteira, depois que o índice lateral já parou. */
.article-footer { padding-bottom:72px; }
.article-footer .related-box { margin:0 0 24px; }
.toc { position:sticky; top:96px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.toc strong { display:block; margin-bottom:10px; font-size:14px; }
/* o índice é uma lista de links de apoio: em 800 competia com o texto */
.toc a { display:block; padding:8px 0; color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; border-top:1px solid #f0ece5; }

/* O índice virou sanfona em 06/09/2026, a pedido do Junior: no celular os 18
   tópicos do artigo do Natal empurravam o texto para fora da primeira tela.
   No computador ele nasce aberto, e o cabeçalho continua parecendo um título. */
.toc summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.toc summary::-webkit-details-marker { display:none; }
.toc summary strong { margin-bottom:0; }
.toc summary::after { content:""; flex:none; width:8px; height:8px; margin-bottom:3px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition: transform .18s ease; }
.toc-sanfona[open] summary::after { margin-bottom:0; transform:rotate(-135deg); }
.toc-lista { margin-top:10px; }
/* Tabela dentro do artigo. Nasceu em 07/09/2026, com a comparação do que é
   gratuito e do que cobra ingresso no Natal de Curitiba: a marcação já era
   aceita pelo sistema, mas nenhuma regra desenhava a tabela. O invólucro rola
   na horizontal para a linha comprida não empurrar a página no celular. */
.tabela-rolo { overflow-x:auto; margin:22px 0 26px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.tabela-rolo table { width:100%; min-width:520px; border-collapse:collapse; font-size:15px; }
.tabela-rolo th, .tabela-rolo td { padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid #f0ece5; }
.tabela-rolo thead th { font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:#fbf9f5; }
.tabela-rolo tbody tr:last-child th, .tabela-rolo tbody tr:last-child td { border-bottom:0; }
.tabela-rolo td { color:#374033; line-height:1.55; }

/* Aviso de procedência, no topo de artigo que depende de agenda de terceiro.
   Pedido do Junior em 08/09/2026: o leitor precisa saber, antes de ler, que a
   informação foi conferida em fonte séria mas pode envelhecer, e que o canal
   oficial manda. Fica em destaque, e não em letra miúda de rodapé. */
.aviso-fonte { margin:26px 0 30px; padding:18px 20px; border:1px solid #e4d9c8; border-left:4px solid var(--gold); border-radius:8px; background:#fdf8ef; }
.aviso-fonte strong { display:block; margin-bottom:6px; font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a6d33; }
.aviso-fonte p { margin:0 0 10px; font-size:15px; line-height:1.6; color:#4a443b; }
.aviso-fonte p:last-child { margin-bottom:0; }

/* Escada de tamanhos. Substituiu uma tabela de três colunas em 07/09/2026:
   a coluna da direita repetia "sob medida ou locação" quatro vezes, e no
   celular a tabela rolava para o lado. Aqui a medida é a âncora do olho, a
   etiqueta diz num relance se a peça é pronta ou feita para o espaço, e tudo
   empilha sozinho na tela estreita. */
.escada { list-style:none; margin:22px 0 26px; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.escada li { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:6px 16px; padding:14px 16px; border-top:1px solid #f0ece5; }
.escada li:first-child { border-top:0; }
.escada b { font-family:"Playfair Display", Georgia, serif; font-size:19px; font-weight:500; color:#172015; letter-spacing:-.01em; }
.escada span { color:var(--muted); font-size:15px; line-height:1.45; }
.escada em { flex:none; padding:4px 10px; border-radius:999px; font-size:11px; font-style:normal; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.escada em.pronta { background:#eef1e9; color:#4a6b52; }
.escada em.medida { background:#f6ece6; color:var(--clay); }

@media (max-width: 620px) {
    .escada li { grid-template-columns:1fr auto; }
    .escada b { grid-column:1; }
    .escada em { grid-column:2; grid-row:1; }
    .escada span { grid-column:1 / -1; }
}

.faq h3 { font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:19px; }
.author { margin-top:46px; padding:22px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.author h2 { margin-top:0; }
footer { border-top:1px solid var(--line); padding:28px 16px; text-align:center; color:var(--muted); }
@media (max-width: 900px) {
    .content-layout { grid-template-columns:1fr; }
    .toc { position:static; order:-1; }
}
@media (max-width: 720px) {
    .nav { min-height:auto; padding:14px 0; align-items:flex-start; flex-direction:column; }
    nav ul { flex-wrap:wrap; gap:12px; }
    article p, article ul, article ol { font-size:16px; }
    article h2 { font-size:28px; }
}


/* ---------------------------------------------------------------------------
 * Cards de recomendação abaixo do artigo.
 *
 * Estilo próprio, e não o da lista do blog: lá o card muda de tamanho pela
 * posição no mosaico de seis colunas, ritmo que não existe aqui. Aqui são três
 * cards iguais, e num celular eles viram uma coluna só.
 * ------------------------------------------------------------------------- */

.related-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.related-card:hover {
    transform: translateY(-3px);
    border-color: #d6c9b7;
    box-shadow: 0 10px 28px rgba(42, 50, 35, .09);
}

.related-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--soft);
}

.related-card > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

/* Os três cards levam a lugares diferentes: outro artigo, uma peça do catálogo
   e uma página da loja. Cada tipo ganha a sua cor e o seu ícone, para a pessoa
   saber onde vai cair antes de clicar. */
.related-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--clay);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.related-tipo::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.tipo-artigo .related-tipo {
    color: var(--green-dark);
    --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6.2c-2-1.6-5-1.6-7.5-.4v12.4c2.5-1.2 5.5-1.2 7.5.4 2-1.6 5-1.6 7.5-.4V5.8c-2.5-1.2-5.5-1.2-7.5.4z"/></svg>');
}

.tipo-produto .related-tipo {
    color: var(--clay);
    --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.6 3.4h-7.4L2.9 13.7l7.4 7.4L20.6 10.8zM16.6 8.4a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>');
}

.tipo-pagina .related-tipo {
    color: var(--gold);
    --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3L2.5 11h3v10h5v-6h3v6h5V11h3z"/></svg>');
}

/* um fio da cor do tipo no alto do card, para separar os três de longe.
   A espessura vem da tela de Aparência, no painel. */
.related-card { border-top: var(--fio-do-card, 3px) solid transparent; }
.tipo-artigo { border-top-color: var(--green-dark); }
.tipo-produto { border-top-color: var(--clay); }
.tipo-pagina { border-top-color: var(--gold); }

.tipo-artigo .related-mais { color: var(--green-dark); }
.tipo-produto .related-mais { color: var(--clay); }
.tipo-pagina .related-mais { color: var(--gold); }

.related-card h3 {
    margin: 8px 0 8px;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: inherit;
}

.related-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.related-mais {
    margin-top: auto;
    padding-top: 16px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .related-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .related-cards > .related-card:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 560px) {
    .related-cards { grid-template-columns: 1fr; }
    .related-cards > .related-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
 * Quebra de linha: nunca uma palavra sozinha no fim.
 *
 * Título que quebra deixando uma palavra solta na segunda linha parece erro de
 * montagem. O navegador sabe distribuir isso: "balance" equilibra as linhas de
 * um bloco curto, e "pretty" cuida do fim de parágrafo, onde a palavra órfã
 * aparece. Navegador que não conhece as duas palavras ignora a regra e quebra
 * como sempre quebrou, sem estrago.
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.card-title, .card-title a,
.catalog-card-content h2,
.related-card h3,
.hero-panel h2,
.article-card h3 {
    text-wrap: balance;
}

p, .dek, .lead, .card-info p, .catalog-card-content p, .related-card p {
    text-wrap: pretty;
}

/* ---- Card de serviços dentro do artigo -------------------------------
   Mesmo desenho do card da entrada do site: foto de fundo, verde musgo por
   cima e botão marsala. Entra nos artigos onde o assunto encosta em montagem,
   locação ou projeto, e leva para a página do serviço. */
.servicos-box {
    position: relative;
    display: block;
    margin: 2.6rem 0;
    padding: 2rem;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    background: #3C4132;
    color: #F4F2EA;
    text-decoration: none;
}

.servicos-box img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    margin: 0;
    border-radius: 0;
}

.servicos-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(48, 53, 40, 0.96) 0%, rgba(60, 65, 50, 0.88) 46%, rgba(60, 65, 50, 0.34) 100%);
}

.servicos-box .servicos-selo {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(155, 62, 78, 0.9);
    border-radius: 999px;
    background: rgba(124, 45, 60, 0.55);
    color: #F6E4E6;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.servicos-box h3 {
    margin: 0 0 0.6rem;
    max-width: 22ch;
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.15;
}

.servicos-box p {
    margin: 0 0 1.2rem;
    max-width: 46ch;
    color: #DCDDD2;
    font-size: 0.95rem;
}

.servicos-box .servicos-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: #8C3A4A;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 0.25s ease, gap 0.25s ease;
}

.servicos-box:hover .servicos-botao {
    background: #7A2F3E;
    gap: 0.8rem;
}

@media (max-width: 620px) {
    .servicos-box { padding: 1.4rem; }
    .servicos-box p { font-size: 0.9rem; }
}

/* Vídeo incorporado do YouTube. Guarda a proporção 16:9 em qualquer largura,
   inclusive no celular, sem depender de altura fixa. Liberado em 05/09/2026;
   quem decide qual endereço entra é video_incorporavel(), em lib/sanitize.php. */
.video-embed {
    position: relative;
    margin: 32px 0;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-legenda {
    margin: -22px 0 32px;
    color: var(--muted, #6b6b6b);
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   O fim do artigo tem a mesma letra e o mesmo respiro do começo.

   O template corta o conteúdo no bloco de leituras relacionadas e joga tudo o
   que vem depois para dentro de .article-footer, que fica fora do <article>.
   Ali as regras de "article p" deixam de valer, e o convite final, as
   perguntas frequentes e as fontes apareciam com letra menor e linhas
   grudadas. Junior apontou isso em 11/09/2026, com print: "chega um momento
   nos artigos, normalmenten, abaixo de algum banner, que voce altera toda
   formatacao e isto nao pode ocorrer".

   Vale só para as seções filhas diretas, para não mexer nos cartões do bloco
   de leituras, que têm tamanho próprio. O bloco verde fica de fora porque tem
   cor de texto própria.
   --------------------------------------------------------------------------- */
.article-footer > section:not(.commercial) p { color:#374033; font-size:18px; line-height:1.78; margin:0 0 18px; }
.article-footer > section:not(.commercial) ul,
.article-footer > section:not(.commercial) ol { margin:0 0 20px; padding-left:22px; color:#374033; font-size:18px; line-height:1.7; }
.article-footer > section li { margin-bottom:8px; }
.article-footer > section h2 { margin:44px 0 14px; font-size:30px; line-height:1.16; }
.article-footer > section h3 { margin:26px 0 10px; font-size:22px; line-height:1.22; }
.article-footer > section.faq h3 { font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:19px; }
.article-footer > section.light-cta h2,
.article-footer > section.author h2 { margin-top:0; }

@media (max-width: 720px) {
    .article-footer > section:not(.commercial) p,
    .article-footer > section:not(.commercial) ul,
    .article-footer > section:not(.commercial) ol { font-size:16px; }
    .article-footer > section h2 { font-size:28px; }
}

/* ---------------------------------------------------------------------------
   Correção de 11/09/2026, segunda parte.

   A primeira parte cobriu só as seções filhas do rodapé. Mas o corte do
   template joga para lá também parágrafos, títulos, listas e figuras soltos,
   sem seção em volta, e eles continuavam com letra menor e linhas grudadas.
   Junior mostrou em dois artigos: "voce fez a mesma coisa em quase todos os
   outros" e "corrija tudo isso em todos os outros artigos também".

   Aqui entram os filhos diretos do rodapé. Os cartões do bloco de leituras e
   a caixa de serviços continuam de fora, porque têm tamanho próprio.
   --------------------------------------------------------------------------- */
.article-footer > p { color:#374033; font-size:18px; line-height:1.78; margin:0 0 18px; }
.article-footer > ul,
.article-footer > ol { margin:0 0 20px; padding-left:22px; color:#374033; font-size:18px; line-height:1.7; }
.article-footer > ul > li,
.article-footer > ol > li { margin-bottom:8px; }
.article-footer > h2 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; color:#172015; margin:44px 0 14px; font-size:30px; line-height:1.16; }
.article-footer > h3 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; color:#172015; margin:26px 0 10px; font-size:22px; line-height:1.22; }

@media (max-width: 720px) {
    .article-footer > p,
    .article-footer > ul,
    .article-footer > ol { font-size:16px; }
    .article-footer > h2 { font-size:28px; }
}

/* ---------------------------------------------------------------------------
   Correção de 11/09/2026, terceira parte: a largura da linha.

   Sobrava uma diferença que ainda saltava aos olhos. O rodapé do artigo ocupa
   a largura inteira, porque o índice lateral já parou, então o texto solto
   depois do banner esticava para 1080 e as linhas ficavam muito mais longas
   que as de cima, que vivem na coluna de 760. Junior: "tudo fora do padrao
   aqui".

   Agora o texto depois do banner lê na mesma medida do texto de cima. Os
   banners e as caixas seguem na largura inteira, de propósito.
   --------------------------------------------------------------------------- */
.article-footer > p,
.article-footer > ul,
.article-footer > ol,
.article-footer > h2,
.article-footer > h3,
.article-footer > figure.section-image { max-width:760px; }

.article-footer > section:not(.commercial) > p,
.article-footer > section:not(.commercial) > ul,
.article-footer > section:not(.commercial) > ol,
.article-footer > section > h2,
.article-footer > section > h3 { max-width:760px; }

/* ---------------------------------------------------------------------------
   Correção de 11/09/2026, quarta parte: as caixas escritas com div.

   Varredura nos 42 artigos que têm rodapé mostrou quatro convites finais
   escritos como <div class="light-cta"> em vez de <section>, e as regras
   acima, que falam em "section", passavam por fora deles. Aqui a conta é pela
   classe, não pela tag, então vale para os dois jeitos de escrever.

   O bloco verde continua de fora, porque tem cor de texto própria, e os
   cartões do bloco de leituras também, porque têm medida própria.
   --------------------------------------------------------------------------- */
.article-footer > :is(.light-cta, .faq, .author) :is(p, li) { color:#374033; font-size:18px; line-height:1.78; }
.article-footer > :is(.light-cta, .faq, .author) :is(ul, ol) { margin:0 0 20px; padding-left:22px; line-height:1.7; }
.article-footer > :is(.light-cta, .faq, .author) li { margin-bottom:8px; }
.article-footer > :is(.light-cta, .faq, .author) h2 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; color:#172015; font-size:30px; line-height:1.16; }
.article-footer > :is(.light-cta, .faq, .author) h3 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:500; color:#172015; margin:26px 0 10px; font-size:22px; line-height:1.22; }
.article-footer > .faq h3 { font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:19px; }
.article-footer > :is(.light-cta, .faq, .author) :is(p, ul, ol, h2, h3) { max-width:760px; }

@media (max-width: 720px) {
    .article-footer > :is(.light-cta, .faq, .author) :is(p, li, ul, ol) { font-size:16px; }
    .article-footer > :is(.light-cta, .faq, .author) h2 { font-size:28px; }
}

/* ---------------------------------------------------------------------------
   Correção de 11/09/2026, quinta e última parte: o bloco verde no rodapé.

   A varredura dos 42 artigos achou um caso, o guirlanda-escapulario-boas-vindas,
   com o bloco verde depois do banner. Ele estava de fora das regras anteriores
   porque tem cor de texto própria, e ficava com a letra miúda.

   Aqui entram só tamanho, respiro e largura. A cor continua vindo das regras
   do próprio bloco, que são as de cima no arquivo.
   --------------------------------------------------------------------------- */
.article-footer > .commercial :is(p, li) { font-size:18px; line-height:1.78; }
.article-footer > .commercial :is(ul, ol) { padding-left:22px; line-height:1.7; }
.article-footer > .commercial li { margin-bottom:8px; }
.article-footer > .commercial h2 { font-size:30px; line-height:1.16; }
.article-footer > .commercial :is(p, ul, ol, h2) { max-width:760px; }

@media (max-width: 720px) {
    .article-footer > .commercial :is(p, li, ul, ol) { font-size:16px; }
    .article-footer > .commercial h2 { font-size:28px; }
}

/* ---------------------------------------------------------------------------
   Card do catálogo online dentro do artigo, 15/09/2026.

   Mesmo desenho do card das páginas de serviço, aprovado pelo Junior. Entra na
   programação de Natal e em 1 a cada 3 artigos novos. As regras começam por
   "article .cat-online" para vencer as do texto do artigo (cor e sublinhado de
   link, margem de título, recuo de lista). Na coluna de 760 as quatro fotos
   ficam numa fileira abaixo do texto; no celular, duas por linha.
   --------------------------------------------------------------------------- */
article .cat-online { margin:44px 0 38px; }
article .cat-online .cartao { position:relative; overflow:hidden; background:#3C4132; color:#EDEFE8; border-radius:22px; box-shadow:0 30px 70px -36px rgba(45,42,38,.55); }
article .cat-online .cartao::before { content:""; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(420px 300px at 0% 0%, rgba(216,178,148,.22) 0%, transparent 60%),
    radial-gradient(520px 360px at 100% 100%, rgba(176,106,75,.30) 0%, transparent 62%); }
article .cat-online .texto { position:relative; padding:40px 40px 8px; }
article .cat-online .selo { display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 10px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#D8B294; }
article .cat-online .selo i { display:block; width:8px; height:8px; border-radius:50%; background:#7BC29A; box-shadow:0 0 0 4px rgba(123,194,154,.2); }
article .cat-online h2 { margin:20px 0 14px; color:#fff; font-size:clamp(28px, 3.4vw, 38px); line-height:1.12; text-wrap:balance; }
article .cat-online h2 em { font-style:italic; color:#D8B294; }
article .cat-online .texto p { margin:0; color:#C4C8B9; font-size:17px; line-height:1.7; max-width:56ch; }
article .cat-online .trilha { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; padding:0; list-style:none; }
article .cat-online .trilha li { margin:0; }
article .cat-online .trilha a { display:inline-flex; align-items:center; min-height:36px; padding:0 15px; border-radius:100px; border:1px solid rgba(255,255,255,.18); color:#EDEFE8; text-decoration:none; font-size:13px; font-weight:500; transition:background .25s ease, border-color .25s ease, color .25s ease; }
article .cat-online .trilha a:hover { background:#D8B294; border-color:#D8B294; color:#3C4132; }
article .cat-online .acoes { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
article .cat-online a.btn { display:inline-flex; align-items:center; min-height:48px; padding:0 28px; border-radius:100px; background:#D8B294; color:#3C4132; font-weight:600; font-size:15px; text-decoration:none; transition:transform .25s ease, background .25s ease; }
article .cat-online a.btn:hover { background:#EDD9C8; color:#3C4132; transform:translateY(-2px); }
article .cat-online a.link { color:#EDD9C8; font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid #D8B294; padding-bottom:2px; }
article .cat-online a.link:hover { color:#fff; }
article .cat-online .vitrine { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; padding:26px 40px 40px; }
article .cat-online a.peca { position:relative; display:block; overflow:hidden; border-radius:14px; background:#fff; text-decoration:none; aspect-ratio:4 / 5; }
article .cat-online .peca img { display:block; width:100%; height:100%; object-fit:cover; margin:0; transition:transform 1.2s ease; }
article .cat-online .peca:hover img { transform:scale(1.06); }
article .cat-online .peca span { position:absolute; left:8px; right:8px; bottom:8px; padding:6px 9px; border-radius:10px; background:rgba(253,251,247,.92); color:#2D2A26; font-size:11.5px; line-height:1.3; font-weight:600; }
article .cat-online .peca span small { display:none; }

@media (max-width: 720px) {
    article .cat-online .texto { padding:32px 22px 4px; }
    article .cat-online .texto p { font-size:16px; }
    article .cat-online .vitrine { grid-template-columns:repeat(2, minmax(0, 1fr)); padding:20px 18px 22px; gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
    article .cat-online * { transition:none !important; }
}