/* ============================================================
   VIGHOME — Blog
   /public_html/css/blog.css
   Carregado só nas páginas do blog, depois de estilo.css.
   Reaproveita as variáveis de estilo.css (--vermelho, --brasa,
   --chama, --display, --corpo) e escreve o conteúdo em fundo branco.
   Mobile first: estilos base para celular, ajustes por min-width.
   ============================================================ */

.blog-pagina{
  --blog-fundo:#FFFFFF;
  --blog-texto:#1F1F25;
  --blog-texto-2:#4A4A53;
  --blog-suave:#6B6B74;
  --blog-linha:#E7E3DE;
  --blog-painel:#F7F4F0;
  background:var(--blog-fundo);
  color:var(--blog-texto);
}
.blog-pagina ::selection{background:#F3D6D6;color:var(--blog-texto)}
.env--estreita{max-width:820px}

/* ---------- trilha (breadcrumb) em fundo claro ---------- */
.trilha--clara{color:var(--blog-suave);margin-bottom:22px}
.trilha--clara a{color:var(--blog-texto-2)}
.trilha--clara a:hover{color:var(--vermelho)}
.trilha--clara span{color:var(--blog-suave)}

/* ---------- rótulos, datas ---------- */
.blog-rotulo{display:inline-block;font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brasa);margin-bottom:12px}
.blog-meta{font-size:.9rem;color:var(--blog-suave);font-family:var(--corpo);max-width:none}
.blog-meta a{color:var(--vermelho);text-decoration:none;font-weight:600}
.blog-meta a:hover{text-decoration:underline}
.blog-meta .ponto{margin:0 8px;color:var(--blog-linha)}

/* ============================================================
   Página inicial do blog (/blog/)
   ============================================================ */
.blog-capa{padding:44px 0 12px}
.blog-capa h1{color:var(--vermelho);font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;margin-bottom:14px}
.blog-capa p{color:var(--blog-texto-2);font-size:1.06rem;max-width:62ch}
.blog-lista{padding:34px 0 76px}
.blog-lista-titulo{max-width:none;font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blog-suave);border-bottom:1px solid var(--blog-linha);padding-bottom:12px;margin-bottom:26px}
.blog-grade{display:grid;grid-template-columns:1fr;gap:26px}

.blog-cartao{display:flex;flex-direction:column;background:#fff;border:1px solid var(--blog-linha);border-radius:6px;overflow:hidden;transition:border-color .2s ease}
.blog-cartao:hover{border-color:var(--vermelho)}
.blog-cartao-figura{display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--blog-painel);border-bottom:3px solid var(--vermelho)}
.blog-cartao-figura img{width:100%;height:100%;object-fit:cover}
.blog-cartao-corpo{padding:22px 22px 24px;display:flex;flex-direction:column;flex-grow:1}
.blog-cartao-topo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:10px}
.blog-cartao-topo .blog-rotulo{margin:0}
.blog-cartao-topo time{font-size:.84rem;color:var(--blog-suave)}
.blog-cartao h2{font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.18;letter-spacing:-.02em;margin-bottom:10px}
.blog-cartao h2 a{color:var(--vermelho);text-decoration:none}
.blog-cartao h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.blog-cartao p{color:var(--blog-texto-2);font-size:.98rem;margin-bottom:18px;flex-grow:1}
.leia-mais{align-self:flex-start;display:inline-block;background:var(--vermelho);color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:2px}
.leia-mais:hover{background:var(--brasa)}

/* ============================================================
   Artigo
   ============================================================ */
.artigo-topo{padding:40px 0 0}
.artigo-topo h1{color:var(--vermelho);font-size:clamp(2rem,6.4vw,3.3rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px}
.artigo-linha-fina{font-size:1.1rem;line-height:1.6;color:var(--blog-texto-2);margin-bottom:16px;max-width:none}
.artigo-capa{max-width:1080px;margin:30px auto 0;padding:0 16px}
.artigo-capa img{width:100%;height:auto;border-radius:6px;border:1px solid var(--blog-linha)}

.artigo-corpo{padding-top:34px;padding-bottom:10px}
.artigo-corpo p{font-size:1.06rem;line-height:1.78;color:var(--blog-texto);margin-bottom:1.15em;max-width:none}
.artigo-corpo strong{color:#111116}
.artigo-corpo a{color:var(--vermelho);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.artigo-corpo a:hover{color:var(--brasa)}
.artigo-corpo h2{color:var(--vermelho);font-size:clamp(1.55rem,4.6vw,2.15rem);line-height:1.16;letter-spacing:-.025em;margin:58px 0 18px;scroll-margin-top:100px}
.artigo-corpo h3{color:var(--vermelho);font-size:clamp(1.12rem,2.6vw,1.3rem);line-height:1.25;letter-spacing:-.015em;margin:30px 0 8px}
.artigo-corpo section{scroll-margin-top:100px}
.artigo-intro p:first-child{font-size:1.14rem}

/* índice "Neste artigo" */
.indice{background:var(--blog-painel);border-left:3px solid var(--vermelho);padding:22px 22px 18px;margin:30px 0 8px;border-radius:0 4px 4px 0}
.artigo-corpo .indice-titulo{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho);margin-bottom:10px}
.indice ol{list-style:none;counter-reset:indice;display:grid;grid-template-columns:1fr;gap:2px 28px}
.indice li{counter-increment:indice}
.artigo-corpo .indice a{display:flex;gap:10px;padding:6px 0;color:var(--blog-texto);text-decoration:none;font-size:.98rem;line-height:1.4}
.artigo-corpo .indice a::before{content:counter(indice,decimal-leading-zero);font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--brasa);min-width:22px;padding-top:2px}
.artigo-corpo .indice a:hover{color:var(--vermelho)}

/* listas */
.lista-artigo{list-style:none;margin:6px 0 22px;border-top:1px solid var(--blog-linha)}
.lista-artigo li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--blog-linha);font-size:1.02rem;line-height:1.7;color:var(--blog-texto)}
.lista-artigo li::before{content:"";position:absolute;left:0;top:1.55em;width:13px;height:2px;background:var(--vermelho)}

/* frase de destaque */
.artigo-corpo .destaque{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,3.6vw,1.55rem);line-height:1.35;letter-spacing:-.02em;color:var(--vermelho);border-left:3px solid var(--vermelho);padding-left:18px;margin:4px 0 24px}

/* bloco de experiência */
.experiencia{background:linear-gradient(150deg,#2C0404 0%,#150303 48%,#0E0E12 100%);border-left:3px solid var(--brasa);border-radius:0 6px 6px 0;padding:26px 22px;margin:30px 0}
.artigo-corpo .experiencia-titulo{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chama);margin-bottom:16px}
.experiencia ul{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.08)}
.experiencia li{background:#120A0B;padding:16px 16px 15px}
.experiencia li strong{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:#fff;margin-bottom:4px}
.experiencia li:last-child strong{color:var(--chama)}
.experiencia li span{display:block;font-size:.92rem;line-height:1.55;color:#C7C5C2}

/* termos de SEO */
.termos{margin:10px 0 22px;border-top:1px solid var(--blog-linha)}
.termos dt{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--vermelho);padding-top:16px}
.termos dd{color:var(--blog-texto);font-size:1rem;line-height:1.7;padding:4px 0 16px;border-bottom:1px solid var(--blog-linha)}

/* checklist "o que o site deve ter" */
.checklist{list-style:none;counter-reset:item;display:grid;grid-template-columns:1fr;gap:0 30px;margin:12px 0 10px;border-top:1px solid var(--blog-linha)}
.checklist li{counter-increment:item;position:relative;padding:15px 0 15px 42px;border-bottom:1px solid var(--blog-linha)}
.checklist li::before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:15px;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--brasa)}
.checklist strong{display:block;font-family:var(--display);font-size:1.02rem;color:var(--blog-texto);margin-bottom:2px}
.checklist span{display:block;font-size:.95rem;line-height:1.6;color:var(--blog-texto-2)}

/* tabela de buscas: empilhada no celular, tabela a partir de 560px */
.tabela-rolagem{margin:6px 0 24px;border:1px solid var(--blog-linha);border-radius:4px}
.tabela-buscas{width:100%;border-collapse:collapse;font-size:.95rem}
.tabela-buscas thead{display:none}
.tabela-buscas tr{display:block;padding:12px 14px;border-bottom:1px solid var(--blog-linha)}
.tabela-buscas tr:last-child{border-bottom:0}
.tabela-buscas td{display:block;padding:0;color:var(--blog-texto)}
.tabela-buscas td:first-child{font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blog-suave);margin-bottom:2px}
.tabela-buscas td:last-child{font-style:italic;color:var(--blog-texto-2)}

/* figuras */
.artigo-figura{margin:26px 0 8px}
.artigo-figura img{width:100%;height:auto;border:1px solid var(--blog-linha);border-radius:6px}
.artigo-figura figcaption{font-size:.86rem;color:var(--blog-suave);margin-top:10px}
.links-caso{display:flex;flex-wrap:wrap;gap:10px 22px}
.artigo-corpo .links-caso a{font-family:var(--display);font-weight:600;font-size:.94rem;text-decoration:none;border-bottom:2px solid var(--vermelho);padding-bottom:2px}

/* chamada para ação */
.cta-artigo{background:linear-gradient(115deg,#1A0202 0%,var(--sangue) 45%,var(--vermelho) 100%);border-radius:6px;padding:32px 24px;margin:58px 0 10px;color:#fff}
.artigo-corpo .cta-artigo .cta-titulo{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,4.2vw,1.8rem);line-height:1.2;letter-spacing:-.025em;color:#fff;margin-bottom:12px}
.artigo-corpo .cta-artigo p{color:#F2DADA;margin-bottom:22px}
.artigo-corpo .cta-artigo .btn{text-decoration:none}
.artigo-corpo .cta-artigo .cta-botao{background:#fff;color:#5A0000;border-color:#fff}
.artigo-corpo .cta-artigo .cta-botao:hover{background:var(--branco);border-color:var(--branco)}
.artigo-corpo .cta-artigo .cta-botao-linha{color:#fff;border-color:rgba(255,255,255,.55)}
.artigo-corpo .cta-artigo .cta-botao-linha:hover{border-color:#fff;color:#fff}

/* perguntas frequentes em fundo claro */
.faq--clara{max-width:none;border-top:1px solid var(--blog-linha)}
.faq--clara details{border-bottom:1px solid var(--blog-linha)}
.faq--clara summary{color:var(--blog-texto)}
.faq--clara summary:hover{color:var(--vermelho)}
.faq--clara summary::after{color:var(--vermelho)}
.faq--clara .faq-resposta{color:var(--blog-texto-2)}
.faq--clara .faq-resposta p{font-size:1rem;color:var(--blog-texto-2);margin-bottom:0}

/* autor */
.autor{display:flex;gap:18px;align-items:flex-start;border-top:1px solid var(--blog-linha);border-bottom:1px solid var(--blog-linha);padding:28px 0;margin-top:56px}
.autor-sigla{flex-shrink:0;width:58px;height:58px;border-radius:50%;background:var(--vermelho);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:.02em}
.artigo-corpo .autor p{font-size:.97rem;line-height:1.7;color:var(--blog-texto-2);margin-bottom:0}
.artigo-corpo .autor .autor-rotulo{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blog-suave);margin-bottom:2px}
.artigo-corpo .autor .autor-nome{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:6px}
.artigo-corpo .autor .autor-nome a{color:var(--blog-texto);text-decoration:none}
.artigo-corpo .autor .autor-nome a:hover{color:var(--vermelho)}

/* serviços relacionados */
.relacionados{margin:40px 0 76px}
.artigo-corpo .relacionados-titulo{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blog-suave);margin-bottom:14px}
.relacionados ul{list-style:none;display:grid;grid-template-columns:1fr;gap:12px}
.artigo-corpo .relacionados a{display:block;height:100%;border:1px solid var(--blog-linha);border-radius:4px;padding:16px 18px;text-decoration:none;transition:border-color .2s ease}
.artigo-corpo .relacionados a:hover{border-color:var(--vermelho)}
.relacionados strong{display:block;font-family:var(--display);color:var(--vermelho);font-size:1.02rem;margin-bottom:2px}
.relacionados span{display:block;font-size:.9rem;color:var(--blog-texto-2)}

/* ============================================================
   Telas maiores
   ============================================================ */
@media (min-width:560px){
  .tabela-buscas thead{display:table-header-group}
  .tabela-buscas tr{display:table-row;padding:0;border-bottom:0}
  .tabela-buscas th{background:var(--blog-painel);text-align:left;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--blog-texto);padding:12px 14px;border-bottom:2px solid var(--vermelho)}
  .tabela-buscas td{display:table-cell;padding:12px 14px;border-bottom:1px solid var(--blog-linha);vertical-align:top}
  .tabela-buscas td:first-child{font-family:var(--corpo);font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--blog-texto);margin:0}
  .tabela-buscas tr:last-child td{border-bottom:0}
  .experiencia{padding:30px 28px}
  .experiencia ul{grid-template-columns:1fr 1fr}
  .indice ol{grid-template-columns:1fr 1fr}
}
@media (min-width:700px){
  .artigo-capa{padding:0 26px}
  .checklist{grid-template-columns:1fr 1fr}
  .termos{display:grid;grid-template-columns:200px 1fr}
  .termos dt{padding:16px 0;border-bottom:1px solid var(--blog-linha)}
  .termos dd{padding:16px 0 16px 8px}
  .cta-artigo{padding:40px 38px}
  .relacionados ul{grid-template-columns:repeat(3,1fr)}
  .blog-grade{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .blog-capa{padding:64px 0 16px}
  .artigo-topo{padding:58px 0 0}
  .artigo-corpo p{font-size:1.1rem}
  .artigo-intro p:first-child{font-size:1.2rem}
  .blog-grade{grid-template-columns:repeat(3,1fr)}
  .blog-cartao--destaque{grid-column:1/-1;flex-direction:row}
  .blog-cartao--destaque .blog-cartao-figura{flex:0 0 56%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--vermelho)}
  .blog-cartao--destaque .blog-cartao-corpo{padding:36px 34px;justify-content:center}
  .blog-cartao--destaque h2{font-size:2rem}
}