/* ============================================================
   A2 ROBOTICS BLOG — estilo compartilhado
   ============================================================ */

:root {
  --a2-marinho: #001060;      /* azul-marinho do logo (cor principal) */
  --a2-marinho-2: #001a80;    /* variação mais clara */
  --a2-dourado: #f0b030;      /* dourado do robô */
  --a2-dourado-esc: #c8901f;  /* dourado escuro (hover) */
  --a2-cor: #001060;          /* alias: cor principal = marinho */
  --a2-cor-escura: #000a40;
  --a2-cor-clara: #e7ebf5;    /* marinho bem claro (fundos) */
  --a2-dourado-claro: #fdf4e0;/* dourado bem claro (destaques) */
  --a2-texto: #1a1a1a;
  --a2-texto-suave: #5f5e5a;
  --a2-borda: #e5e5e0;
  --a2-fundo: #ffffff;
  --a2-fundo-suave: #f7f6f2;
  --a2-verde: #34a853;
  --a2-amarelo: #f9ab00;
  --a2-vermelho: #ea4335;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--a2-texto);
  line-height: 1.6;
  background: var(--a2-fundo);
}

a { color: inherit; }

/* ===== CABEÇALHO DO SITE ===== */
.site-header {
  border-bottom: 3px solid var(--a2-dourado);
  background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.site-header .wrap {
  max-width: 960px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 700; font-size: 18px; color: var(--a2-marinho);
}
.site-logo img { height: 50px; width: auto; display: block; }
.site-nav { display: flex; gap: 22px; font-size: 15px; align-items: center; }
.site-nav a { text-decoration: none; color: var(--a2-texto-suave); }
.site-nav a:hover { color: var(--a2-marinho); }
.site-nav .loja {
  background: var(--a2-marinho); color: #fff; padding: 8px 16px;
  border-radius: 8px; font-weight: 700;
}
.site-nav .loja:hover { background: #001a80; color: #fff; }

/* ===== CONTÊINER ===== */
.container { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; }
.container-wide { max-width: 960px; margin: 0 auto; padding: 32px 20px 60px; }

/* ===== HOME: HERO ===== */
.hero { text-align: center; padding: 48px 0 36px; }
.hero h1 { font-size: 34px; font-weight: 700; margin: 0 0 12px; color: var(--a2-marinho); }
.hero h1 .destaque { color: var(--a2-dourado); }
.hero p { font-size: 18px; color: var(--a2-texto-suave); margin: 0 auto; max-width: 560px; }
.hero .risca { width: 60px; height: 4px; background: var(--a2-dourado); border-radius: 2px; margin: 18px auto 0; }

/* ===== HOME: BANNER HERO (com imagem) — FULL WIDTH ===== */
.hero-banner {
  width: 100%;
  margin: 0 0 40px;
  border-radius: 0;
  background-size: cover; background-position: center;
  min-height: 360px; display: flex; align-items: center;
}
.hero-banner-overlay {
  width: 100%; min-height: 360px; display: flex; align-items: center;
  /* gradiente marinho: escuro à esquerda (onde fica o texto), transparente à direita */
  background: linear-gradient(90deg, rgba(0,10,50,.92) 0%, rgba(0,16,96,.72) 40%, rgba(0,16,96,.12) 100%);
}
/* o conteúdo do banner acompanha a largura do restante do site (centralizado) */
.hero-banner-inner {
  max-width: 960px; margin: 0 auto; width: 100%;
  padding: 40px 20px;
}
.hero-banner-flex {
  display: flex; align-items: center; gap: 36px;
}
.hero-banner-logo {
  height: 180px; width: auto; flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.55));
}
.hero-banner-txt { max-width: 520px; }
.hero-banner-txt h1 { font-size: 42px; font-weight: 800; margin: 0 0 14px; color: #fff; line-height: 1.15; }
.hero-banner-txt h1 .destaque { color: var(--a2-dourado); }
.hero-banner-txt p { font-size: 17px; color: #eef1f8; margin: 0; line-height: 1.6; }
.hero-banner-txt .risca { width: 60px; height: 4px; background: var(--a2-dourado); border-radius: 2px; margin: 20px 0 0; }

/* ===== HOME: GRID DE POSTS ===== */
.grid-posts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px; margin-top: 8px;
}
.card-post {
  border: 1px solid var(--a2-borda); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit; background: #fff;
  display: flex; flex-direction: column; transition: all .15s ease;
}
.card-post:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #d5d5cf; }
.card-post .thumb { width: 100%; aspect-ratio: 16/9; background: #eef3f8; overflow: hidden; }
.card-post .thumb img, .card-post .thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-post .body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.card-post .cat {
  font-size: 12px; font-weight: 700; color: var(--a2-dourado-esc);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.card-post h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; color: var(--a2-marinho); }
.card-post .resumo { font-size: 14px; color: var(--a2-texto-suave); margin: 0 0 12px; flex: 1; }
.card-post .meta { font-size: 12px; color: #999; display: flex; gap: 12px; }

/* ===== POST: cabeçalho ===== */
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 13px; color: var(--a2-texto-suave); margin-bottom: 10px; }
.badge { background: var(--a2-dourado-claro); color: var(--a2-dourado-esc);
  padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.post-titulo { font-size: 30px; font-weight: 700; line-height: 1.22; margin: 6px 0 14px; }
.post-intro { font-size: 18px; color: var(--a2-texto-suave); margin: 0 0 26px; }

.capa { width: 100%; border-radius: 14px; overflow: hidden; margin-bottom: 30px;
  border: 1px solid var(--a2-borda); background: #eef3f8; }
.capa img, .capa svg { width: 100%; height: auto; display: block; }

.secao-titulo { font-size: 21px; font-weight: 700; margin: 34px 0 6px;
  display: flex; align-items: center; gap: 8px; }
.secao-titulo .ico { color: var(--a2-cor); font-size: 22px; display: inline-flex; }
.secao-titulo .ico svg { width: 22px; height: 22px; }
.secao-sub { font-size: 13px; color: #999; margin: 0 0 16px; }
.texto { font-size: 16px; margin: 0 0 20px; }

/* ===== MATERIAIS ===== */
.materiais { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.item { background: #fff; border: 1px solid var(--a2-borda); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; transition: all .15s ease; }
.item:hover { border-color: var(--a2-cor); box-shadow: 0 2px 12px rgba(26,115,232,.12); transform: translateY(-1px); }
.item-ico { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  background: var(--a2-cor-clara); color: var(--a2-marinho); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
.item-ico img { width: 100%; height: 100%; object-fit: cover; }
.item-ico svg { width: 26px; height: 26px; }
.item-info { flex: 1; min-width: 0; }
.item-nome { font-weight: 600; font-size: 15px; margin: 0; }
.item-qtd { font-size: 13px; color: var(--a2-texto-suave); margin: 2px 0 0; }
.item-cta { font-size: 13px; color: var(--a2-cor); font-weight: 600; white-space: nowrap; }

.cta-loja { background: var(--a2-marinho); border-radius: 12px; padding: 18px 20px;
  margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; border-left: 4px solid var(--a2-dourado); }
.cta-txt strong { color: #fff; font-size: 15px; display: block; }
.cta-txt span { color: #cfd6ea; font-size: 13px; }
.cta-btn { background: var(--a2-dourado); color: var(--a2-marinho); text-decoration: none;
  padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 700;
  white-space: nowrap; transition: background .15s ease; }
.cta-btn:hover { background: #ffc94d; }

/* ===== DIAGRAMA ===== */
.diagrama { width: 100%; background: #fafafa; border: 1px solid var(--a2-borda);
  border-radius: 14px; padding: 20px; margin-bottom: 12px; }
.diagrama svg { width: 100%; height: auto; display: block; }
.legenda { font-size: 13px; color: var(--a2-texto-suave); margin: 0 0 28px;
  display: flex; flex-wrap: wrap; gap: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }

/* ===== TABELA ===== */
.tabela { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--a2-borda); }
.tabela th { background: var(--a2-fundo-suave); font-weight: 600; }
.tabela td:first-child { font-family: monospace; color: var(--a2-cor-escura); }

/* ===== CÓDIGO ===== */
.codigo { background: #1e1e2e; color: #e0e0e0; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 28px; overflow-x: auto;
  font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.65; }
.codigo .cmt { color: #7a7a8c; }
.codigo .kw { color: #82aaff; }
.codigo .fn { color: #c3e88d; }
.codigo .st { color: #ecc48d; }

/* ===== PASSOS ===== */
.passos { counter-reset: passo; padding: 0; list-style: none; margin: 0 0 32px; }
.passo { position: relative; padding: 0 0 20px 44px; margin: 0; border-left: 2px solid var(--a2-borda); }
.passo:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
.passo::before { counter-increment: passo; content: counter(passo);
  position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--a2-cor); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; }
.passo h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.passo p { margin: 0; font-size: 15px; color: var(--a2-texto-suave); }

/* ===== VOLTAR ===== */
.voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  color: var(--a2-cor); text-decoration: none; margin-bottom: 20px; font-weight: 600; }

/* ===== RODAPÉ ===== */
.site-footer { border-top: 3px solid var(--a2-dourado); background: var(--a2-marinho);
  margin-top: 90px; position: relative; overflow: visible; }
.site-footer .wrap { max-width: 960px; margin: 0 auto; padding: 28px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 14px; color: #cfd6ea; position: relative; z-index: 2; }
.site-footer a { color: var(--a2-dourado); text-decoration: none; font-weight: 600; }
/* Robô no canto inferior direito, subindo sobre a faixa dourada */
.footer-robo {
  position: absolute; right: 40px; bottom: 0;
  height: 200px; width: auto; z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

@media (max-width: 600px) {
  .post-titulo { font-size: 24px; }
  .hero h1 { font-size: 27px; }
  .item-cta { display: none; }
  .cta-loja { flex-direction: column; align-items: flex-start; }
  .site-nav { gap: 12px; font-size: 14px; }
  .hero-banner, .hero-banner-overlay { min-height: 230px; }
  .hero-banner {
    background-image: url('/blog/assets/banner-mobile.jpg') !important;
  }
  .hero-banner-overlay {
    background: linear-gradient(180deg, rgba(0,10,50,.55) 0%, rgba(0,16,96,.9) 100%);
  }
  .hero-banner-inner { padding: 28px 20px; }
  .hero-banner-flex { flex-direction: column; gap: 16px; text-align: center; }
  .hero-banner-logo { height: 110px; }
  .hero-banner-txt { max-width: 100%; text-align: center; }
  .hero-banner-txt h1 { font-size: 28px; }
  .hero-banner-txt p { font-size: 15px; }
  .hero-banner-txt .risca { margin: 16px auto 0; }
  .footer-robo { height: 120px; right: 12px; opacity: .9; }
  .site-footer .wrap { padding-right: 130px; }
}