/*
Theme Name:   Guto Advocacia — Ficha
Theme URI:    https://guto.adv.br/
Description:  Child theme do Astra com o sistema visual "Ficha": três fundos, escala de seis tamanhos, uma abertura de seção. Ver README.md do pacote de handoff.
Author:       José Augusto de Lima Prestes
Template:     astra
Version:      1.7.0
Text Domain:  guto-ficha
*/

/* --- 0. Tipografia hospedada localmente ---------------------------------
   Libre Franklin (variável, 100–900), servida deste domínio. Sem requisição
   a fonts.googleapis.com / fonts.gstatic.com: nenhuma transferência
   internacional de dados pelo carregamento da fonte. Ver README, seção 8.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/libre-franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/libre-franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   guto.adv.br — sistema visual "Ficha"
   Child theme do Astra. Editar tokens abaixo; nunca cores soltas no conteúdo.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Três fundos, e só três */
  --g-bg:        #ffffff;
  --g-bg-tone:   #eef0f5;
  --g-bg-accent: #ccd3e6;
  --g-navy:      #20264a;   /* cor da identidade */
  --g-footer:    #141821;

  /* Texto */
  --g-ink:       #141821;   /* títulos */
  --g-body:      #2f3542;   /* corpo — 11,4:1 sobre branco */
  --g-muted:     #5a6478;   /* rótulos — 6,6:1 */
  --g-on-navy:   #d5dbee;   /* corpo sobre azul-marinho */
  --g-navy-soft: #b6bde0;   /* rótulos sobre azul-marinho */
  --g-rule:      #c3c8d6;   /* fios */
  --g-rule-soft: #e4e7ef;   /* fios internos de tabela */

  /* Tipografia: uma família, seis tamanhos */
  --g-font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-t1: 44px;  /* h1 */
  --g-t2: 28px;  /* h2 */
  --g-t3: 18px;  /* h3 / destaque */
  --g-t4: 16px;  /* corpo */
  --g-t5: 15px;  /* corpo secundário e listas */
  --g-t6: 11px;  /* rótulos versaletes */

  /* Ritmo */
  --g-band-y: 72px;
  --g-band-x: 48px;
  --g-hero-y: 96px;
  --g-max: 1180px;
}

/* --- 2. Base ------------------------------------------------------------ */
.g-page { font-family: var(--g-font); color: var(--g-ink); max-width: var(--g-max); margin: 0 auto; background: var(--g-bg); }
.g-page *, .g-page *::before, .g-page *::after { box-sizing: border-box; }
.g-page a { color: var(--g-navy); }
.g-page a:hover { color: var(--g-ink); }
.g-band--navy a:not(.g-btn), .g-band--navy a:not(.g-btn):hover { color: #fff; }

/* --- 3. Faixas (a ordem de cores da página) ----------------------------- */
/* Toda página abre em --g-navy, segue em branco, desce para tone/accent,
   e o rodapé escuro fecha. Nunca duas faixas iguais em sequência.        */
.g-band          { padding: var(--g-band-y) var(--g-band-x); background: var(--g-bg); border-bottom: 1px solid var(--g-rule); }
.g-band--tone    { background: var(--g-bg-tone); }
.g-band--accent  { background: var(--g-bg-accent); border-bottom: 0; }
.g-band--navy    { background: var(--g-navy); border-bottom: 0; padding: var(--g-hero-y) var(--g-band-x) 84px; }
.g-band--slim    { padding: 22px var(--g-band-x); }
/* Bloco de contato que fecha toda página, antes do rodapé */
.g-band--closing { border-top: 1px solid var(--g-rule); border-bottom: 0; }
.g-band:last-child { border-bottom: 0; }

/* Faixa de contato que fecha toda página, antes do rodapé */
.g-cta { padding: 56px var(--g-band-x); }
.g-cta__grid { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 36px; align-items: end; }
.g-cta__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.g-cta__note { font-size: var(--g-t6); font-weight: 500; letter-spacing: .06em; color: var(--g-navy-soft); }
.g-h2--light { color: #fff; max-width: 30ch; }
@media (max-width: 880px) { .g-cta__grid { grid-template-columns: 1fr; align-items: start; gap: 24px; } }

/* --- 4. Abertura de seção (rótulo numerado + barra + fio) --------------- */
.g-kicker { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.g-kicker--tight { margin-bottom: 10px; }
.g-kicker__label {
  font-size: var(--g-t6); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-navy); border-left: 3px solid var(--g-navy); padding-left: 11px;
}
.g-kicker__rule { flex: 1; height: 1px; background: var(--g-rule); }
.g-band--navy .g-kicker__label { color: var(--g-navy-soft); border-left-color: var(--g-navy-soft); }
.g-band--navy .g-kicker__rule  { background: rgba(255,255,255,.22); }

/* --- 5. Tipografia ------------------------------------------------------ */
.g-h1 { margin: 0 0 26px; font-size: var(--g-t1); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; max-width: 26ch; text-wrap: balance; }
.g-band--navy .g-h1 { color: #fff; }
.g-h2 { margin: 0 0 16px; font-size: var(--g-t2); font-weight: 700; letter-spacing: -.02em; color: var(--g-ink); max-width: 44ch; text-wrap: balance; }
.g-h2--spaced { margin-bottom: 40px; }
.g-h3 { margin: 28px 0 12px; font-size: var(--g-t3); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--g-ink); }
.g-cards__cell .g-h3, .g-panel .g-h3:first-of-type { margin-top: 0; }
.g-h4 { margin: 22px 0 10px; font-size: var(--g-t4); font-weight: 700; color: var(--g-ink); }
.g-h4:first-child { margin-top: 0; }
.g-h4--sm { margin: 0 0 6px; font-size: 14px; color: var(--g-navy); letter-spacing: -.01em; }

/* O parágrafo de abertura usa --g-t3, o tamanho que a escala reserva para
   "h3 / destaque". Vinha com --g-t4, o mesmo do corpo, e por isso não se
   distinguia do texto comum -- o .g-p--strong, que é o outro destaque do
   sistema, já usava --g-t3. Afeta as 14 ocorrências de .g-lead no site. */
.g-lead { margin: 0 0 24px; font-size: var(--g-t3); line-height: 1.7; color: var(--g-body); max-width: 64ch; text-wrap: pretty; }
.g-lead--light, .g-lead--onnavy { color: var(--g-on-navy); }
.g-lead--onnavy { font-size: var(--g-t3); line-height: 1.6; letter-spacing: -.01em; color: #fff; }
.g-p { margin: 0 0 14px; font-size: var(--g-t4); line-height: 1.75; color: var(--g-body); max-width: 70ch; text-wrap: pretty; }
.g-p--sm { font-size: var(--g-t5); }
.g-p--light { color: var(--g-on-navy); }
.g-p--strong { font-size: var(--g-t3); font-weight: 600; line-height: 1.6; letter-spacing: -.01em; color: var(--g-ink); }
.g-p:last-child, .g-lead:last-child { margin-bottom: 0; }
.g-strong { color: var(--g-ink); font-weight: 600; }
.g-strong--light { color: #fff; }
.g-stamp { margin: 0 0 30px; font-size: 14px; font-weight: 600; color: var(--g-navy-soft); }

.g-eyebrow { font-size: var(--g-t6); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-navy); }
.g-eyebrow--block { display: block; margin-bottom: 14px; }
.g-eyebrow-wrap { margin-bottom: 16px; }
.g-label { display: block; font-size: var(--g-t6); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 10px; }

/* --- 6. Listas com marcador quadrado ----------------------------------- */
.g-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; max-width: 70ch; }
.g-list--2col { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; max-width: none; }
/* O item da lista NAO pode ser flex.
   A regra original era:
     .g-list li { display: flex; align-items: baseline; gap: 10px; }
     .g-list li::before { ... flex: none; transform: translateY(-4px); }
   O flex existia para posicionar o quadradinho do marcador, mas transforma
   *cada filho* do <li> em item. Num item de texto puro isso da certo (marcador
   + texto). Num item como
     <li><strong>Rotulo:</strong> descricao...</li>
   saem tres colunas -- marcador, rotulo e descricao --, e o rotulo fica
   espremido numa coluna estreita, quebrando em varias linhas. Medido na
   Politica de Privacidade: o <strong> ia a 103px em 3 linhas, quando cabe em
   191px numa linha so.
   Com o marcador em posicao absoluta, o conteudo do <li> volta a fluir como
   texto corrido e o padrao <strong> + texto funciona. Vale para os 10 itens
   desse tipo no site, todos nas duas versoes da Politica. */
.g-list li { display: block; position: relative; padding-left: 14px; font-size: var(--g-t5); line-height: 1.7; color: var(--g-body); }
.g-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; background: var(--g-navy); }
.g-list:last-child { margin-bottom: 0; }

/* --- 7. Grade de cartões (o bloco reutilizável do sistema) ------------- */
.g-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--g-rule); border: 1px solid var(--g-rule); }
.g-cards__cell { background: var(--g-bg-tone); padding: 30px 28px; }
.g-cards__cell--white { background: var(--g-bg); }
.g-cards__foot { grid-column: 1 / -1; background: var(--g-bg-accent); padding: 26px 28px; }
.g-panel { background: var(--g-bg); padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.g-panel--sm { padding: 26px 28px; }
.g-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.g-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; margin-top: 36px; }
.g-grid-auto--contact { grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 40px; margin-top: 0; }
.g-stack { display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.g-sublist { margin-top: 6px; border-top: 1px solid var(--g-rule); padding-top: 16px; }
.g-sublist__label { display: block; font-size: var(--g-t6); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 12px; }
.g-meta { margin: 0 0 14px; max-width: 70ch; }
.g-meta .g-label { margin-bottom: 2px; }

/* --- 8. Tabela de formação / docência ---------------------------------- */
.g-table { background: var(--g-bg); }
.g-table__row { padding: 20px 22px; border-top: 1px solid var(--g-rule-soft); }
.g-table__row:first-child { border-top: 0; }
.g-table__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 5px; }
.g-table__name { font-size: var(--g-t4); font-weight: 700; color: var(--g-ink); letter-spacing: -.01em; }
.g-table__date { font-size: 14px; font-weight: 600; color: var(--g-navy); white-space: nowrap; }
.g-table__sub  { font-size: var(--g-t5); line-height: 1.65; color: var(--g-body); }

/* --- 9. Perfil (retrato + texto) --------------------------------------- */
.g-profile { display: grid; grid-template-columns: minmax(150px,200px) minmax(0,1fr); gap: 36px; align-items: start; }
.g-profile__text { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.g-portrait { border: 1px solid rgba(255,255,255,.28); aspect-ratio: 4/5; overflow: hidden; }
.g-band:not(.g-band--navy) .g-portrait { border-color: var(--g-rule); }
.g-portrait__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }

/* --- 10. Ações --------------------------------------------------------- */
.g-btn { display: inline-block; background: #fff; color: var(--g-navy); padding: 13px 26px; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.g-btn--lg { padding: 14px 28px; white-space: nowrap; }
.g-band--navy a.g-btn { color: var(--g-navy); }
.g-btn:hover, .g-band--navy a.g-btn:hover { background: var(--g-bg-accent); color: var(--g-navy); }
.g-more { display: inline-block; margin-top: 32px; font-size: 14px; font-weight: 600; color: var(--g-navy); border-bottom: 1px solid var(--g-navy); padding-bottom: 3px; text-decoration: none; }
.g-more:hover { color: var(--g-ink); border-bottom-color: var(--g-ink); }
.g-contact__value { margin: 0; font-size: var(--g-t5); font-weight: 600; color: var(--g-navy); }
.g-mail { color: var(--g-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(32,38,74,.35); }
.g-mail:hover { color: var(--g-ink); border-bottom-color: var(--g-ink); }
.g-mail--light { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.g-mail--light:hover { color: #fff; border-bottom-color: #fff; }
/* Cláusula de idioma prevalecente na tradução de cortesia */
.g-govern { border-left: 3px solid var(--g-navy-soft); padding: 2px 0 2px 16px; max-width: 70ch; }
.g-band:not(.g-band--navy) .g-govern { border-left-color: var(--g-navy); }

/* --- 11. Cabeçalho e rodapé do tema ------------------------------------ */
.g-langswitch { display: inline-flex; align-items: center; gap: 2px; margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--g-rule); font-family: var(--g-font); font-size: var(--g-t6); font-weight: 600; letter-spacing: .1em; }
.g-langswitch a { padding: 8px; color: var(--g-muted); text-decoration: none; }
.g-langswitch a.is-active { background: var(--g-footer); color: #fff; }

.g-foot { background: var(--g-footer); color: rgba(255,255,255,.7); padding: 40px var(--g-band-x) 30px; display: flex; flex-direction: column; gap: 24px; font-family: var(--g-font); font-size: 13px; line-height: 1.8; }
.g-foot__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 40px; max-width: var(--g-max); margin: 0 auto; width: 100%; }
.g-foot__id strong { color: #fff; font-weight: 600; }
.g-foot__addr { margin-top: 12px; }
.g-foot__mail { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.g-foot__links { display: flex; flex-direction: column; gap: 9px; font-size: var(--g-t6); font-weight: 600; letter-spacing: .1em; }
.g-foot__links a { color: inherit; text-decoration: none; }
.g-foot__links a:hover { color: #fff; }
.g-foot__rule { max-width: var(--g-max); margin: 0 auto; width: 100%; border-top: 1px solid rgba(255,255,255,.16); padding-top: 16px; font-size: var(--g-t6); font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.68); }

/* --- 12. Responsivo ---------------------------------------------------- */
@media (max-width: 880px) {
  :root { --g-t1: 34px; --g-t2: 24px; --g-band-y: 52px; --g-band-x: 24px; --g-hero-y: 64px; }
  .g-cards, .g-grid-2, .g-list--2col { grid-template-columns: 1fr; }
  .g-cards { gap: 1px; }
  .g-profile { grid-template-columns: 1fr; gap: 24px; }
  .g-portrait { max-width: 220px; }
  .g-table__head { flex-direction: column; gap: 2px; }
}
@media (max-width: 880px) {
  .g-foot__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  :root { --g-t1: 28px; --g-band-x: 18px; }
}

/* --- 13. Impressão ----------------------------------------------------- */
@media print {
  .g-band--navy { background: #fff !important; }
  .g-band--navy .g-h1, .g-band--navy .g-kicker__label, .g-p--light, .g-lead--light, .g-lead--onnavy { color: #141821 !important; }
  .g-band { border-bottom: 1px solid #ccc; page-break-inside: avoid; }
}

/* --- 9. Tipografia sobre o Astra ----------------------------------------
   O Astra grava font-family direto em body e nos titulos, via CSS dinamico.
   Regra que casa com o elemento vence heranca de .g-page, entao declarar a
   familia so no container nao basta: sem os seletores abaixo o site inteiro
   renderiza na fonte do Customizer do Astra (Lora), e nao na Libre Franklin
   servida localmente.

   Como o enqueue do Google Fonts do Astra foi removido no functions.php, sem
   este bloco a Lora nem sequer carregaria e a pagina cairia em serif generico.
   Os dois ajustes andam juntos.
   ---------------------------------------------------------------------- */
html body,
.main-header-bar,
.main-header-bar .main-navigation,
.main-header-menu,
.main-header-menu a,
.ast-site-identity,
.site-title,
.site-title a,
.site-description {
  font-family: var(--g-font);
}

.g-page,
.g-page h1, .g-page h2, .g-page h3, .g-page h4, .g-page h5, .g-page h6,
.g-page p, .g-page li, .g-page a, .g-page span, .g-page div,
.g-page strong, .g-page em, .g-page td, .g-page th, .g-page blockquote,
.g-foot, .g-foot a, .g-langswitch, .g-langswitch a {
  font-family: var(--g-font);
}

/* O alternador PT|EN entra como ultimo item do menu principal. */
.guto-lang-item {
  display: flex;
  align-items: center;
}

/* --- 10. Cabecalho e rodape do Astra -------------------------------------
   Tres ajustes sobre o tema pai.
   ---------------------------------------------------------------------- */

/* 10.1 Rodape duplicado.
   O PHP ja remove o rodape do Footer Builder em template_redirect. Isto e rede
   de seguranca: se uma versao futura do Astra montar o #colophon por outro
   caminho, ele continua oculto em vez de reaparecer sob o nosso.
   O .g-foot e irmao do #colophon, nao filho, entao nao e afetado. */
#colophon,
.site-footer {
  display: none;
}

/* 10.2 Cabecalho: trava de identidade em duas linhas.
   No mockup a marca vem com o nome em cima e a atuacao embaixo, em corpo menor.
   O Astra renderiza o titulo do site em uma linha so, entao o titulo passou a
   ser apenas o nome e a atuacao virou a descricao do site (tagline), exibida
   pelo filtro em functions.php.

   O logotipo e enviado em 500x266 e vinha a 221px de altura, levando o
   cabecalho a 256px. O !important e proposital: o Astra gera a regra de tamanho
   a partir do Customizer e sem ele a altura volta. */
.ast-site-identity .custom-logo-link img,
.site-logo-img .custom-logo-link img,
img.custom-logo {
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
}

.main-header-bar {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ast-site-identity .ast-site-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.ast-site-identity .site-title,
.ast-site-identity .site-title a {
  font-family: var(--g-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--g-ink);
  text-transform: none;
}

/* O Astra declara .site-header .site-description { display: none } (tres vezes,
   no CSS dinamico). O seletor abaixo vai a 0,3,0 e vence em qualquer ordem,
   inclusive no cabecalho de celular. */
.site-header .ast-site-identity .site-description,
.ast-site-identity .site-description {
  display: block;
  margin: 0;
  font-family: var(--g-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--g-navy);
  text-transform: none;
}

/* 10.3 Item de menu selecionado.
   Mesmo tratamento do idioma ativo no alternador: tarja escura, texto branco.
   O 'body' na frente leva a especificidade a 0,4,1, um acima da regra do Astra
   (.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link, 0,4,0), que
   pinta o item atual de azul. Sem isso o texto sai azul-escuro sobre a tarja
   preta -- 2,7:1 de contraste, abaixo do minimo. Assim fica 17,8:1.
   Nao use !important aqui: a especificidade ja resolve, em qualquer ordem. */
body .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
body .ast-builder-menu-1 .menu-item.current_page_item > .menu-link,
body .ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
body .main-header-menu .current-menu-item > .menu-link,
body .main-header-menu .current_page_item > .menu-link,
body .main-header-menu .current-menu-ancestor > .menu-link {
  background: var(--g-footer);
  color: #ffffff;
}

body .main-header-menu .menu-item > .menu-link {
  padding: 8px 14px;
}

/* --- 11. Largura do conteudo sobre o Astra -------------------------------
   O Astra aplica, no layout "page-builder":

     .ast-page-builder-template .entry-content[data-ast-blocks-layout] > *
     { max-width: none; }

   Especificidade 0,3,0, contra 0,1,0 do .g-page -- e o .g-page perde a
   largura maxima de 1180px, esticando as faixas ate a borda da janela.

   O atributo [data-ast-blocks-layout] so e adicionado quando o conteudo usa
   blocos. Enquanto o HTML entrava cru (e o wpautop o corrompia), nao havia
   bloco algum e a regra nao casava. Ao embrulhar o conteudo em
   <!-- wp:html --> -- necessario para parar a corrupcao -- a regra passou a
   valer. Os dois seletores abaixo levam a 0,4,0 e devolvem a largura.
   ---------------------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .g-page,
.entry-content[data-ast-blocks-layout] > .g-page {
  max-width: var(--g-max);
  margin-left: auto;
  margin-right: auto;
}

/* --- 12. Cabecalho fixo na rolagem ---------------------------------------
   O Astra gratuito nao tem cabecalho fixo -- e recurso do Astra Pro. Resolvido
   aqui, sem JavaScript.

   Dois detalhes que o position:sticky sozinho nao cobre:

   1. O #masthead tem fundo TRANSPARENTE por padrao. Enquanto ele apenas rolava
      junto com a pagina isso nao aparecia, porque o topo do documento e branco.
      Fixo sobre a faixa navy, o conteudo passaria a aparecer atras dele. Dai o
      background explicito.

   2. A barra de administracao do WordPress ocupa 32px no topo quando voce esta
      logado. Sem o deslocamento, o cabecalho fica por baixo dela. Abaixo de
      782px a barra deixa de ser fixa e rola junto, entao o topo volta a zero.

   Verificado no ar antes de entrar no pacote: apos rolar 900px o cabecalho fica
   com top=0, elementFromPoint no topo da tela devolve um elemento interno dele
   (ou seja, cobre o conteudo) e os itens de menu seguem clicaveis.

   O cabecalho ocupa 117px, cerca de 15% de uma janela de 800px. Se ficar
   pesado, da para encolhe-lo na rolagem -- exige um JavaScript curto, que nao
   foi incluido por nao ter sido pedido.
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--g-bg);
  box-shadow: 0 1px 0 var(--g-rule);
}

.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 0;
  }
}

/* --- 13. Alternador PT|EN no menu de celular -----------------------------
   No cabecalho de desktop o alternador entra como ultimo item do menu, numa
   linha horizontal com fio a esquerda. No menu de celular os itens sao
   empilhados e ocupam a largura toda, entao o fio vertical e a margem lateral
   nao fazem sentido -- viram um fio superior separando o alternador dos itens
   de navegacao.
   ---------------------------------------------------------------------- */
.ast-builder-menu-mobile .guto-lang-item {
  display: block;
}

.ast-builder-menu-mobile .guto-lang-item .g-langswitch {
  display: flex;
  margin-left: 0;
  padding: 6px 0;
  border-left: 0;
  border-top: 1px solid var(--g-rule);
  font-size: var(--g-t6);
}

.ast-builder-menu-mobile .guto-lang-item .g-langswitch a {
  padding: 10px 14px;
}

/* --- 14. Rótulo de seção como título ------------------------------------
   Em /sobre/, /en/profile/ e na faixa de contato das oito páginas, o rótulo
   da faixa era o único título da seção — mas estava marcado como <span>.
   Medido em 05/09/2026: /sobre/ tinha UM título na página inteira. Sem
   estrutura de títulos, leitor de tela não navega por seções e buscadores e
   modelos de linguagem não têm por onde segmentar o conteúdo.

   O elemento passou a <h2>, mantendo a classe. O desenho não muda: estas
   regras anulam margem, corpo e peso que o navegador e o Astra aplicariam.
   Especificidade 0,2,1 — o Astra estiliza h2 por .entry-content h2 (0,1,1).
   ---------------------------------------------------------------------- */
.g-kicker h2.g-kicker__label {
  margin: 0;
  font-size: var(--g-t6);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-navy);
}

.g-band--navy .g-kicker h2.g-kicker__label {
  color: var(--g-navy-soft);
}