:root {
  --fundo: #e6e7e3;
  --fundo-claro: #eeefeb;
  --branco: #f7f7f4;
  --oliva: #49523e;
  --oliva-escuro: #363d2d;
  --caramelo: #b08d5f;
  --texto: #3c4034;
  --texto-suave: #6a6f60;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300; color: var(--texto); background: var(--fundo); line-height: 1.75;
}
h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 400; color: var(--oliva); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-artigo { max-width: 740px; margin: 0 auto; padding: 0 24px; }

/* Header (igual ao site) */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(230, 231, 227, 0.94);
  border-bottom: 1px solid rgba(73, 82, 62, 0.12);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1080px; margin: 0 auto;
}
.marca { display: flex; flex-direction: column; line-height: 1.2; }
.marca .nome { font-family: 'Cinzel', Georgia, serif; font-size: 20px; letter-spacing: 0.12em; color: var(--oliva); }
.marca .sub { font-size: 9px; letter-spacing: 0.42em; color: var(--caramelo); text-transform: uppercase; }
nav.principal { display: flex; gap: 26px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
nav.principal a { color: var(--texto-suave); transition: color 0.2s; }
nav.principal a:hover { color: var(--oliva); }
@media (max-width: 700px) { nav.principal { display: none; } }

/* Breadcrumb */
.trilha { padding: 22px 0 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--texto-suave); }
.trilha a { color: var(--caramelo); }
.trilha a:hover { color: var(--oliva); }

/* Cabeçalho do blog */
.blog-topo { text-align: center; padding: 54px 0 40px; }
.blog-topo h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.06em; }
.blog-topo .linha { width: 60px; height: 1px; background: var(--caramelo); margin: 18px auto 20px; }
.blog-topo p { color: var(--texto-suave); max-width: 540px; margin: 0 auto; }

/* Lista de posts */
.blog-lista { padding: 20px 0 90px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; background: var(--branco); border: 1px solid rgba(73, 82, 62, 0.1); transition: border-color 0.2s; }
.post:hover { border-color: var(--caramelo); }
.post .post-tampa { aspect-ratio: 16 / 10; background: var(--oliva); display: flex; align-items: center; justify-content: center; }
.post .post-tampa svg { width: 46px; height: 46px; stroke: var(--caramelo); fill: none; stroke-width: 1.2; }
.post .post-corpo { padding: 24px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.post .post-etiqueta { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--caramelo); margin-bottom: 12px; }
.post h3 { font-size: 18px; line-height: 1.35; letter-spacing: 0.02em; margin-bottom: 12px; }
.post p { font-size: 13.5px; color: var(--texto-suave); flex-grow: 1; }
.post .post-link { margin-top: 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oliva); font-weight: 500; }

/* Artigo */
.artigo { padding: 8px 0 70px; }
.artigo .etiqueta { display: inline-block; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--caramelo); margin: 26px 0 14px; }
.artigo h1 { font-size: clamp(27px, 4vw, 40px); line-height: 1.25; letter-spacing: 0.02em; }
.artigo .meta { margin-top: 18px; font-size: 13px; color: var(--texto-suave); border-bottom: 1px solid rgba(73, 82, 62, 0.15); padding-bottom: 24px; }
.artigo .conteudo { margin-top: 34px; }
.artigo .conteudo p { margin-bottom: 20px; font-size: 16px; }
.artigo .conteudo h2 { font-size: 23px; letter-spacing: 0.03em; margin: 40px 0 16px; }
.artigo .conteudo h3 { font-size: 18px; letter-spacing: 0.02em; margin: 28px 0 12px; color: var(--oliva-escuro); }
.artigo .conteudo ul { margin: 0 0 20px; padding-left: 22px; }
.artigo .conteudo li { margin-bottom: 10px; font-size: 16px; }
.artigo .conteudo strong { font-weight: 600; color: var(--oliva); }
.artigo .destaque {
  background: var(--branco); border-left: 2px solid var(--caramelo);
  padding: 22px 26px; margin: 30px 0; font-size: 15.5px; color: var(--texto);
}
.artigo .nota-legal { font-size: 13px; color: var(--texto-suave); font-style: italic; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(73, 82, 62, 0.15); }

/* Caixa de conversão dentro do artigo */
.cta-artigo { background: var(--oliva); color: var(--branco); padding: 40px 34px; text-align: center; margin: 46px 0 10px; }
.cta-artigo h2 { color: var(--branco); font-size: 22px; letter-spacing: 0.04em; margin-bottom: 10px; }
.cta-artigo p { color: rgba(247, 247, 244, 0.82); font-size: 15px; margin-bottom: 22px; }
.btn { display: inline-block; padding: 14px 30px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; transition: all 0.2s; }
.btn-clara { background: var(--branco); color: var(--oliva); }
.btn-clara:hover { background: #ffffff; }
.btn-borda { border: 1px solid var(--oliva); color: var(--oliva); }
.btn-borda:hover { background: var(--oliva); color: var(--branco); }
.voltar { display: inline-block; margin-top: 40px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--caramelo); }
.voltar:hover { color: var(--oliva); }

/* Footer */
footer { background: var(--oliva-escuro); color: rgba(247, 247, 244, 0.75); padding: 40px 0; text-align: center; }
footer .nome-footer { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.16em; color: var(--branco); font-size: 17px; }
footer .sub-footer { font-size: 9px; letter-spacing: 0.42em; color: var(--caramelo); text-transform: uppercase; margin-top: 4px; }
footer p { font-size: 12.5px; margin-top: 16px; }
footer a { color: var(--caramelo); }

.zap-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--oliva); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: transform 0.2s;
}
.zap-flutuante:hover { transform: scale(1.1) rotate(4deg); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
.zap-flutuante svg { width: 28px; height: 28px; fill: var(--branco); }

/* ===== Transições e efeitos de hover ===== */
a, .btn, .post, nav.principal a, .zap-flutuante { transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-clara:hover, .btn-borda:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(54, 61, 45, 0.2); }
nav.principal a { position: relative; }
nav.principal a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px;
  background: var(--caramelo); transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
nav.principal a:hover::after { transform: scaleX(1); transform-origin: left; }
.post:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(54, 61, 45, 0.14); }
.post .post-tampa svg { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.post:hover .post-tampa svg { transform: scale(1.14); }
.post .post-link { transition: letter-spacing 0.3s ease; }
.post:hover .post-link { letter-spacing: 0.2em; }
.voltar { transition: all 0.3s ease; }
.voltar:hover { letter-spacing: 0.16em; }
.cta-artigo .btn-clara:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25); }

/* ===== Revelação ao rolar ===== */
html.js .revelar { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .revelar.visivel { opacity: 1; transform: none; }

/* ===== Acabamento premium ===== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes surgirPagina { from { opacity: 0; } to { opacity: 1; } }
html.js body { animation: surgirPagina 0.7s ease both; }
header { transition: background 0.35s ease, box-shadow 0.35s ease; }
.header-inner { transition: padding 0.35s ease; }
.marca .nome { transition: font-size 0.35s ease; }
header.encolhido { background: rgba(230, 231, 227, 0.97); box-shadow: 0 6px 24px rgba(54, 61, 45, 0.09); }
header.encolhido .header-inner { padding-top: 10px; padding-bottom: 10px; }
header.encolhido .marca .nome { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  html.js .revelar { opacity: 1; transform: none; transition: none; }
  html.js body { animation: none; }
  * { scroll-behavior: auto; }
}