/* Estilo compartilhado do blog e das páginas de conteúdo.
   Arquivo único: cada artigo novo entra sem copiar CSS, e um ajuste
   de leitura vale para todos de uma vez. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0F172A; background: #F8FAFC; line-height: 1.7;
}
header.topo { background: linear-gradient(135deg, #0EA5E9, #075985); color: #fff; padding: 28px 20px; }
.wrap { max-width: 720px; margin: 0 auto; }
.brand { font-weight: 800; font-size: 1.1rem; }
.brand a { color: #fff; text-decoration: none; }
.crumb { font-size: .8rem; opacity: .85; margin-top: 10px; }
.crumb a { color: #fff; }
header.topo h1 { font-size: 1.55rem; margin-top: 8px; line-height: 1.35; }
header.topo p.sub { opacity: .92; font-size: .95rem; margin-top: 8px; max-width: 560px; }
.meta { font-size: .82rem; opacity: .85; margin-top: 10px; }

main { max-width: 720px; margin: 0 auto; padding: 30px 20px 60px; }
h2 { font-size: 1.2rem; margin: 30px 0 10px; color: #075985; line-height: 1.4; }
h3 { font-size: 1.02rem; margin: 22px 0 8px; color: #0F172A; }
p, li { font-size: .98rem; color: #334155; margin-bottom: 12px; }
ul, ol { padding-left: 24px; margin-bottom: 14px; }
li { margin-bottom: 8px; }
a { color: #0284C7; }
code { background: #E2E8F0; border-radius: 4px; padding: 1px 5px; font-size: .88em; }
strong { color: #0F172A; }

blockquote {
    border-left: 4px solid #0EA5E9; background: #F0F9FF; padding: 14px 18px;
    border-radius: 0 10px 10px 0; margin: 18px 0; font-weight: 600; color: #075985;
}
blockquote p { color: #075985; margin: 0; }

.historia {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
    padding: 20px 22px; margin-bottom: 8px; font-style: italic; color: #475569;
}
.historia p:last-child { margin-bottom: 0; }

/* Caixa de alerta honesto — usada quando precisamos avisar de uma limitação real */
.aviso {
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px;
    padding: 16px 20px; margin: 20px 0;
}
.aviso p { color: #92400E; margin-bottom: 0; font-size: .93rem; }
.aviso strong { color: #78350F; }

.cta {
    background: linear-gradient(135deg, #0EA5E9, #0284C7); color: #fff;
    border-radius: 14px; padding: 24px; text-align: center; margin: 30px 0 8px;
}
.cta strong { display: block; font-size: 1.05rem; margin-bottom: 6px; color: #fff; }
.cta p { color: #fff; opacity: .95; font-size: .9rem; margin-bottom: 0; }
.cta a {
    display: inline-block; margin-top: 14px; background: #fff; color: #0369A1;
    font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 10px;
}

.leia { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 18px 22px; margin-top: 24px; }
.leia strong { display: block; margin-bottom: 8px; color: #0F172A; font-size: .92rem; }
.leia a { display: block; color: #0284C7; font-size: .92rem; text-decoration: none; margin-bottom: 6px; }
.leia a:hover { text-decoration: underline; }

.disclaimer { font-size: .78rem; color: #94A3B8; margin-top: 26px; line-height: 1.6; }
footer { text-align: center; padding: 20px; font-size: .8rem; color: #94A3B8; }
footer a { color: #0EA5E9; }

/* Índice do blog */
.post {
    display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 22px 24px; margin-bottom: 16px; text-decoration: none; color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.post:hover { box-shadow: 0 10px 24px -12px rgba(2, 132, 199, .35); transform: translateY(-2px); }
.post .tag {
    display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #0369A1; background: #E0F2FE;
    border-radius: 20px; padding: 3px 10px; margin-bottom: 10px;
}
.post h2 { font-size: 1.15rem; color: #0F172A; line-height: 1.4; margin: 0; }
.post p { font-size: .92rem; color: #475569; margin-top: 6px; margin-bottom: 0; }
.post .data { font-size: .78rem; color: #94A3B8; margin-top: 10px; }

.secao-titulo {
    font-size: .75rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #64748B; margin: 28px 0 12px;
}


/* Marca: o coração com batimento é o logo do produto (fa-heart-pulse).
   Vetor embutido em vez do coração-emoji, que é outro desenho, muda de forma
   e de azul em cada sistema, e some onde não há fonte de emoji colorido. */
.logo-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; }
/* Sem cor própria: herda currentColor do contexto. Fixar o azul da marca
   deixava o coração azul sobre o cabeçalho azul, quase invisível. */