/* Estilo do blog — mesmas variáveis da landing, de propósito.
 *
 * Arquivo separado (e não CSS embutido como no index.html) porque aqui há
 * VÁRIAS páginas: embutir faria cada artigo carregar sua própria cópia e,
 * pior, faria uma correção de estilo ter de ser repetida em cada arquivo.
 * Continua sem requisição externa — é do próprio domínio. */

:root{
  --petrol:#1d293d; --petrol-d:#0f1826; --ink:#16232a; --slate:#4a5b63;
  --mist:#f4f7f7; --line:#dde6e6; --accent:#e08a3c; --white:#fff;
  --maxw:1080px; --leitura:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol)}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Cabeçalho — mesma altura e mesma cara da landing, para não parecer
   outro site quando a pessoa chega pelo Google e depois clica em "Taiva". */
header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand small{font-weight:600; color:var(--petrol); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--slate); font-weight:500; text-decoration:none}
.nav-links a:hover{color:var(--petrol)}

.btn{display:inline-block; padding:.85em 1.5em; border-radius:8px; font-weight:600;
  border:2px solid var(--petrol); transition:.15s; text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--petrol); color:var(--white)}
.btn-primary:hover{background:var(--petrol-d); border-color:var(--petrol-d)}
.nav-links a.btn-primary{color:var(--white)}

/* Coluna de leitura mais estreita que a landing: texto corrido com 1080px de
   largura cansa. ~720px fica perto das 75 colunas que se lê sem esforço. */
.artigo{max-width:var(--leitura); margin:0 auto; padding:0 24px}
.capa{background:linear-gradient(180deg,var(--mist),var(--white)); padding:56px 0 34px; border-bottom:1px solid var(--line)}
.eyebrow{font-weight:700; color:var(--petrol); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
h1{font-size:clamp(1.85rem,4vw,2.6rem); line-height:1.2; letter-spacing:-.02em; margin:.25em 0 .3em}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.25; margin:1.9em 0 .5em; letter-spacing:-.01em}
h3{font-size:1.1rem; margin:1.5em 0 .4em}
p{margin:0 0 1.05em}
.lead{font-size:1.16rem; color:var(--slate)}
.meta{color:var(--slate); font-size:.9rem; margin-top:10px}
main{padding:38px 0 20px}
ul,ol{margin:0 0 1.2em; padding-left:1.3em}
li{margin:.35em 0}
blockquote{margin:1.4em 0; padding:14px 20px; border-left:4px solid var(--accent);
  background:var(--mist); border-radius:0 8px 8px 0; color:var(--ink)}
blockquote p:last-child{margin-bottom:0}
table{width:100%; border-collapse:collapse; margin:1.3em 0; font-size:.96rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--mist); font-weight:700}
/* Tabela que não cabe rola dentro da própria caixa — a PÁGINA nunca rola
   para o lado, que é o defeito de leitura mais comum no celular. */
.rolagem{overflow-x:auto; -webkit-overflow-scrolling:touch}

.caixa{background:var(--mist); border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin:1.6em 0}
.caixa h3{margin-top:0}
.caixa p:last-child{margin-bottom:0}

/* Chamada final — repete a da landing para quem chegou direto por um artigo. */
.cta{background:var(--petrol); color:var(--white); text-align:center; padding:54px 0; margin-top:56px}
.cta h2{color:var(--white); margin-top:0}
.cta p{color:#d6ecec; max-width:560px; margin:0 auto 22px}
.cta .btn-primary{background:var(--white); color:var(--petrol); border-color:var(--white)}
.cta .btn-primary:hover{background:#eaf5f5}

/* Índice do blog */
.lista{display:grid; gap:20px; margin:34px 0 10px}
.item{border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--white)}
.item:hover{border-color:var(--petrol)}
.item h2{margin:0 0 .35em; font-size:1.25rem}
.item h2 a{text-decoration:none}
.item p{margin:0; color:var(--slate)}

footer{padding:34px 0; font-size:.9rem; color:var(--slate); border-top:1px solid var(--line); margin-top:10px}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}

@media(max-width:720px){
  .nav{height:auto; padding:12px 0; flex-direction:column; align-items:flex-start}
  .nav-links{gap:14px}
}

/* ===========================================================================
   ÍNDICE DO BLOG: grade de posts + barra lateral de temas

   Duas colunas de cards, como pedido, e a lateral vira a PRIMEIRA coisa no
   celular? Não: `order` mantém os posts na frente. Quem chega pelo Google quer
   o texto, não o índice de assuntos.

   Nenhuma linha de JavaScript. O accordion é `<details>` do próprio HTML, que
   já vem acessível por teclado e por leitor de tela, e abre mesmo se nada
   carregar. Um componente React aqui trocaria isso por dependência, build e
   conteúdo renderizado no cliente, que é pior justamente para a razão de o
   blog existir: ser encontrado.
   =========================================================================== */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
  padding-top: 34px;
}
.blog-layout .lista { grid-template-columns: 1fr 1fr; margin-top: 0; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 28px; }
  .blog-layout .lista { grid-template-columns: 1fr; }
  .blog-layout main { order: 1; }
  .blog-sidebar { order: 2; }
}

.card-post { display: flex; flex-direction: column; gap: 8px; }
.tag-tema {
  align-self: flex-start;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol); background: var(--mist);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

.blog-sidebar { position: sticky; top: 86px; }
.sidebar-titulo {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 10px;
}
.tema { border-bottom: 1px solid var(--line); }
.tema > summary {
  cursor: pointer; padding: 11px 2px; font-size: .93rem; font-weight: 600;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tema > summary::-webkit-details-marker { display: none }
/* A seta é desenhada com texto e gira ao abrir: sem imagem, sem ícone externo. */
.tema > summary::after {
  content: "\203A"; font-size: 1.15rem; color: var(--slate);
  transition: transform .15s; transform: rotate(90deg);
}
.tema[open] > summary::after { transform: rotate(-90deg) }
.tema > summary:hover { color: var(--petrol) }
.tema > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px }

/* Ponto discreto marcando o tema que já tem post. Cor E título: cor sozinha não
   é informação para quem não a distingue. */
.com-post { color: var(--accent); font-size: 1.1rem; line-height: 1 }

.pilares { list-style: none; margin: 0 0 12px; padding: 0 0 0 2px }
.pilares li {
  font-size: .86rem; color: var(--slate); padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line); margin: 0 0 2px;
}