/* comece.css — "Comece por aqui" (mapa do hub), sobre os tokens do lab.css.
   Accent azul-marca (#2563eb): esta é a página "centro", distinta do roxo do
   Lab e do verde da Loja. Sem emoji, sem travessão conector. */

:root { --accent: #2563eb; }

.cq-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* Topbar em PÍLULA flutuante, o padrão das páginas secundárias (/projetos/, /servicos/).
   O lab.css entrega uma barra de largura cheia com borda embaixo; aqui ela vira pílula.
   Largura casada com o .cq-wrap (1000px), então as bordas alinham com o bento. */
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1000px, calc(100% - 2.5rem));
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dark) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5);
  z-index: 1000;
}
/* Grade 1fr/auto/1fr: marca à esquerda, irmãos de hub CENTRADOS de verdade (o centro não
   depende de marca e ações terem a mesma largura, que é o que quebra com space-between),
   ações à direita. Respiro lateral = o do .cq-wrap, pra marca alinhar com o H1 e os cards. */
.topbar__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .55rem clamp(1rem, 4vw, 2rem);
}
.topbar__inner > .brand { justify-self: start; }
.hubnav { display: flex; align-items: center; gap: .15rem; justify-self: center; }
.topbar__inner > .topbar__nav { justify-self: end; }

/* ---- Irmãos de hub na topbar (Lab · Loja · Biblioteca) ----
   Só as seções da família hub. Links da LP e CTA NÃO entram aqui (DESIGN.md §6.3). */
.hubnav__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 500; text-decoration: none; padding: .4rem .6rem; border-radius: var(--r-input, 10px); transition: background .18s, color .18s; }
.hubnav__link i { font-size: 1.05em; }
.hubnav__link:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.nav-lab { color: #8b5cf6; } .nav-loja { color: #22c55e; } .nav-biblioteca { color: #f59e0b; }

/* Hambúrguer: só existe no mobile, onde os 3 rótulos não cabem na pílula de 280px. */
.hubnav__burger { display: none; appearance: none; width: 38px; height: 38px; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 1.15rem; cursor: pointer; }
.hubnav__burger:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.hubnav__burger .close-icon { display: none; }
.hubnav__burger.is-open .menu-icon { display: none; }
.hubnav__burger.is-open .close-icon { display: block; }

.hubnav__panel { display: none; }
@media (max-width: 780px) {
  /* Só sobram marca + ações (o hubnav do meio some) — grid 1fr/auto/1fr não colapsa a
     faixa vazia de forma confiável, então vira flex com as duas pontas explícitas. */
  .topbar__inner { display: flex; justify-content: space-between; }
  .hubnav, .topbar__nav .backlink { display: none; }
  .hubnav__burger { display: inline-flex; }
  /* Painel ancorado NA pílula: ela é fixed, então position:absolute aqui pende dela. */
  .hubnav__panel {
    display: flex; flex-direction: column; gap: .15rem;
    position: absolute; top: calc(100% + 10px); right: 0; left: 0;
    padding: .5rem; border: 1px solid var(--border); border-radius: 18px;
    /* OPACO de propósito: com vidro translúcido o H1 do herói vaza através do painel e ele
       lê como inacabado (verificado em 320px). Legibilidade > efeito. */
    background: var(--bg-card);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .18s var(--ease-std, ease), transform .18s var(--ease-std, ease);
  }
  .hubnav__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .hubnav__panel a { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; text-decoration: none; font-weight: 500; }
  .hubnav__panel a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .hubnav__panel .hubnav__home { color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce) { .hubnav__panel { transition: none; } }

/* A pílula é fixed: está FORA do fluxo e não empurra nada. O herói precisa se afastar
   sozinho, senão passa por baixo dela (foi exatamente o defeito da primeira tentativa). */
.cq-hero { margin: 0 0 1.8rem; padding-top: clamp(92px, 7vw, 108px); max-width: 720px; }

/* Substrato: os pontinhos SUTIS da home (alpha .09), não os do Lab (.16). Copiado de
   portscomplete/style.css em vez de carregar a folha inteira (81KB) só pelo fundo.
   Se o substrato mudar lá, espelhe aqui — são as 2 únicas cópias. */
body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .07), transparent 42%),
    radial-gradient(color-mix(in srgb, var(--text-muted) 9%, transparent) 1px, transparent 1.6px);
  background-size: 100% 100%, 30px 30px;
}

/* Pílula da seção na marca, no modelo de /projetos/: preenchida em brand blue, não o
   contorno cinza do .brand-tag padrão do lab.css. */
.brand-tag--pill {
  font-family: var(--font-body); font-size: .7rem; letter-spacing: .5px; text-transform: none;
  background: rgba(37, 99, 235, .15); color: var(--brand-light);
  border-color: rgba(37, 99, 235, .2); border-radius: 6px; padding: 2px 8px;
}
[data-theme="light"] .brand-tag--pill { background: rgba(37, 99, 235, .10); color: var(--brand-blue); border-color: rgba(37, 99, 235, .25); }
.cq-hero__kicker { font: 700 .72rem var(--font-mono); letter-spacing: .18em; color: var(--accent); margin: 0 0 .5rem; }
.cq-hero__title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.04; margin: 0 0 .7rem; }
.cq-hero__lead { color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; }

/* Contêiner comum das seções (Vitrine, Novidades) */
.cq-section { margin: clamp(2rem, 6vw, 3.5rem) 0; }
.cq-section__title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin: 0 0 1rem; }

/* ===== Vitrine bento — a célula é dimensionada pelo PESO do conteúdo =============
   BASE = UMA coluna, declarada explicitamente ANTES do breakpoint (grade sem base
   explícita já custou overflow em mobile neste repo). O peso só passa a valer a
   partir de 721px. Chrome deliberadamente chapado — hairline + superfície, sem
   glass, sem gradiente, sem sombra: a hierarquia sai do TAMANHO da célula e da
   capa real, não de efeito. Raio menor (--r-input) que os .cq-card de seção lá
   embaixo, pra a vitrine ler como folha de plotter e não como card de marketing. */
.hub-bento { display: grid; grid-template-columns: 1fr; gap: .9rem; }

.hub-cel { display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-input);
  transition: border-color .15s var(--ease-std), background-color .15s var(--ease-std); }
.hub-cel:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface-2); }
.hub-cel:hover .hub-cel__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Capa full-bleed no topo. As capas de projeto são prints de tela → corta pelo alto.
   As de post/toy chegam como <figure> pronta do blog/lab: neutraliza a geometria
   dela aqui (o comece-aqui não carrega blog.css) e reveste no accent da página.
   O SUBSTRATO dot-grid é espelhado aqui (DESIGN.md §6.2: quando o blog.css não
   está na página, replique as regras do cover) — sem isto a capa do toy herda os
   pontos do lab.css e a do post fica lisa, e as duas ficam lado a lado com fundo
   diferente. Mesmos tokens/medidas do .toy-card__cover e do .post-card__cover. */
.hub-cel__capa { position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
  border-bottom: 1px solid var(--border); background-color: var(--cover-bg);
  background-image: radial-gradient(var(--cover-grid) 1px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--accent); --cover-fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.hub-cel__capa > figure { margin: 0; position: absolute; inset: 0; }
.hub-cel__capa img, .hub-cel__capa svg { display: block; width: 100%; height: 100%; }
.hub-cel__capa img { object-fit: cover; object-position: 50% 0; }

.hub-cel__corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: .9rem 1rem 1rem; }
/* O rótulo do nicho vem ANTES do título de propósito: é ele que faz a página ler
   como oito ALCANCES em vez de oito coisas. Selo mono da casa, não decoração.
   Cor por tema porque ele é obrigatório e precisa ser LEGÍVEL: o azul-marca sobre o
   card escuro mede 2.83:1 (reprova AA); --brand-light sobre o mesmo card dá 5.75:1.
   No tema claro é o inverso — o azul-marca dá 5.17:1 e o claro só 2.54:1. */
.hub-cel__nicho { font: 700 .68rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-light); margin: 0 0 .35rem; }
[data-theme="light"] .hub-cel__nicho { color: var(--accent); }
.hub-cel__titulo { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em;
  font-size: 1.1rem; line-height: 1.25; margin: 0 0 .4rem; }
.hub-cel__resumo { color: var(--text-muted); font-size: .88rem; line-height: 1.5; margin: 0; }

/* Item sem capa resolvível: tratamento tipográfico (o título cresce e ocupa o lugar
   da imagem) em vez de um placeholder vazio. Decidido pelo TIPO de capa que o
   bpso_hub_imagem() devolveu (atributo data-capa), nunca por item. */
.hub-cel[data-capa="nenhuma"] .hub-cel__titulo { font-size: 1.3rem; }

.hub-cel--todos .hub-cel__corpo { justify-content: center; }
.hub-cel--todos .hub-cel__titulo i { font-size: .95em; }

@media (min-width: 721px) {
  .hub-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); }
  .hub-cel--grande  { grid-column: span 2; grid-row: span 2; }
  .hub-cel--medio   { grid-column: span 2; }
  .hub-cel--pequeno { grid-column: span 1; }

  /* Peso = espaço, e o FORMATO segue a proporção da célula: a grande (2x2, quase
     quadrada) é um cartaz vertical com capa alta; a média (2x1, deitada) vira uma
     faixa com a capa à esquerda — empilhada ela ficaria tão alta quanto a grande e
     mataria a hierarquia (medido: 401px vs 426px antes desta regra). */
  .hub-cel--grande .hub-cel__capa { aspect-ratio: auto; flex: 1; }
  .hub-cel--grande .hub-cel__corpo { flex: none; padding: 1rem 1.15rem 1.15rem; }
  .hub-cel--grande .hub-cel__titulo { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
  .hub-cel--grande .hub-cel__resumo { font-size: .95rem; }
  .hub-cel--grande[data-capa="nenhuma"] .hub-cel__corpo { flex: 1; }

  .hub-cel--medio { flex-direction: row; }
  .hub-cel--medio .hub-cel__capa { aspect-ratio: auto; flex: 0 0 38%;
    border-bottom: none; border-right: 1px solid var(--border); }
  .hub-cel--medio .hub-cel__corpo { justify-content: center; }

  /* Na pequena (223px de largura) o que decide é o TIPO de capa, não o item:
     - data-capa="svg": capa própria do repo (bpso_blog_cover/bpso_lab_cover), desenho
       vetorial que continua legível reduzido → mostra a capa;
     - data-capa="img": print/card genérico, que nesse quadro vira mancha ilegível
       (medido: /assets/og-default.png virava texto cortado) → cai na placa
       tipográfica. Capa ilegível é decoração, justo o que o anti-slop proíbe.
     O resumo fica nas duas — a célula é a menor da hierarquia pelo TAMANHO, não por
     amputar conteúdo. Em <=720px o peso não vale e todas mostram tudo. */
  .hub-cel--pequeno:not([data-capa="svg"]) .hub-cel__capa { display: none; }
  .hub-cel--pequeno:not([data-capa="svg"]) .hub-cel__corpo { justify-content: center; }
  .hub-cel--pequeno .hub-cel__titulo { font-size: 1.05rem; }
}

/* ===== Novidades — lista que EMBRULHA, nunca rola: os 6 itens ficam TODOS visíveis.
   O objetivo da seção é descoberta, e item atrás de um overflow-x é item que o
   visitante não sabe que existe. minmax(240px,1fr) dá 3 colunas na coluna de 936px,
   2 em tablet e 1 em mobile — sem buraco e sem borda órfã em nenhuma largura, porque
   o filete que separa é o de TOPO de cada item (a régua acompanha a linha) e não um
   border-right que sobraria no fim da linha. Mais leve que a vitrine de propósito:
   sem card, sem capa, sem sombra. Zero motion — nada a desligar em reduced-motion. */
.hub-faixa { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.4rem; }
.hub-novidade { min-width: 0; padding: .9rem 0 1.2rem; border-top: 1px solid var(--border);
  text-decoration: none; color: inherit; }
.hub-novidade__tipo { display: block; font: 700 .66rem var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-light); margin: 0 0 .4rem; }
[data-theme="light"] .hub-novidade__tipo { color: var(--accent); }
.hub-novidade__titulo { font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  line-height: 1.35; margin: 0 0 .5rem; }
.hub-novidade:hover .hub-novidade__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hub-novidade__data { display: block; font-size: .78rem; color: var(--text-muted); }

/* grid das outras áreas */
.cq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cq-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.2rem 1.25rem;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-card); box-shadow: var(--shadow-soft);
  transition: transform .15s var(--ease-std), border-color .15s; }
.cq-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cq-card__icon { font-size: 1.7rem; color: var(--accent); margin-bottom: .55rem; }
.cq-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin: 0 0 .35rem; }
.cq-card__txt { color: var(--text-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 .8rem; flex: 1; }
.cq-card__go { font: 600 .82rem var(--font-body); color: var(--accent); display: inline-flex; align-items: center; gap: .25rem; }

.cq-outro { text-align: center; margin: 2.4rem 0 1rem; }
.cq-outro p { color: var(--text-muted); font-size: 1rem; margin: 0 0 .7rem; }
.cq-outro__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: 1.05rem;
  color: var(--accent); text-decoration: none; }
.cq-outro__cta:hover { text-decoration: underline; }

/* a newsletter aqui respira um pouco mais */
.cq-wrap .bp-news { margin: 2rem 0; }

@media (max-width: 560px) {
  .cq-grid { grid-template-columns: 1fr; }
}