/* ==========================================================================
   LAYOUT — shell, sidebar (TOC), main, seções, abertura
   ========================================================================== */

/* ---------- shell ----------
   Largura cheia, como no print: o índice encosta na borda esquerda da
   janela. Centralizar criava duas faixas de preto nas laterais, e a régua
   do índice fazia o conjunto parecer um painel solto no meio da tela. */
.shell{
  display:grid;
  grid-template-columns: var(--toc-w) 1fr;
  width:100%;
}
/* Item de grid nasce com min-width:auto, então a capa, que sai do recuo por
   margem negativa, empurrava a coluna e alargava a página inteira. */
.shell > nav.toc,
.shell > main{ min-width:0; }
@media (max-width: 900px){
  .shell{ grid-template-columns:1fr; }
}

/* ---------- sidebar / índice ---------- */
/* Medidas cotadas pelo cliente: coluna de 250px, recuo de 32px,
   bloco da marca com 71.83px de altura e régua embaixo. */
nav.toc{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
}
/* Abaixo de 900px o índice vira gaveta, fora da tela até ser chamado. */
@media (max-width: 900px){
  nav.toc{
    position:fixed;
    top:0; right:0; bottom:0; left:auto;
    width:min(330px, 86vw);
    height:100%;
    z-index:80;
    padding:76px 0 24px;
    border-right:none;
    border-left:1px solid var(--line);
    background:var(--bg-card);
    overflow-y:auto;
    justify-content:flex-start;
    transform:translateX(100%);
    transition:transform .28s ease;
  }
  nav.toc.aberto{ transform:none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  nav.toc{ transition:none; }
}

.toc-brand{
  display:flex; align-items:center;
  height:71.83px;
  padding-left:32px;
  margin:0;
  border-bottom:1px solid var(--line);
}
.toc-brand img{ display:block; width:132px; height:auto; }
@media (max-width: 900px){ .toc-brand{ display:none; } }

.toc-list{ list-style:none; padding:30px 20px 0 32px; }
@media (max-width: 900px){ .toc-list{ padding:0 24px; } }
/* Número em coluna própria: o texto do item e o do subtópico alinham
   na mesma vertical, como no print. */
.toc-list a{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:baseline;
  color:var(--text-muted);
  text-decoration:none;
  font-size:15px;
  padding:10px 0;
  transition:color .2s ease;
}
@media (max-width: 900px){ .toc-list a{ font-size:17px; padding:13px 0; } }
.toc-list a .n{
  font-size:15px;
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.toc-list a.active,
.toc-list a:hover{ color:var(--text); }
.toc-list a.active .n{ color:var(--gold); }

/* Subtópicos (Identidade visual → Logo · Cores · Tipografia) */
/* Subtópico fica recolhido e só abre quando a seção-mãe está ativa.
   O toc.js já acende o link-mãe quando um subtópico entra em foco,
   então basta olhar para o <li> que contém o link ativo. */
.toc-sub{ list-style:none; margin:0; padding:0 0 0 28px; display:none; }
.toc-list li:has(> a.active) .toc-sub{ display:block; }
.toc-sub a{
  display:block;
  font-size:15px;
  padding:10px 0;
  color:var(--text-dim);
}
.toc-sub a.active{ color:var(--gold); }


.toc-foot{
  padding:0 20px 40px 32px;
  font-size:11.5px;
  color:var(--text-dim);
  line-height:1.7;
}
@media (max-width: 900px){ .toc-foot{ padding:28px 24px 0; } }

/* ---------- conteúdo ----------
   Recuo igual dos dois lados. O da direita era o --pad-x de 32px, e o
   conteúdo encostava na borda enquanto a esquerda respirava 112px. */
main{ padding:0 112px 120px; }
@media (max-width: 1180px){ main{ padding:0 64px 120px; } }
@media (max-width: 900px){ main{ padding:56px 24px 80px; } }

/* Sem régua acima: o chip numerado já marca a virada, e a linha dupla
   (régua + régua do marcador) era ruído. */
section{
  max-width:var(--maxw);
  padding-top:var(--space-section);
  padding-bottom:64px;
}
section:last-of-type{ padding-bottom:0; }
/* A primeira seção não precisa do respiro de virada: não há nada acima
   dela para separar, e 190px deixavam a tela abrir quase vazia. */
/* A capa encosta no topo: ela é sangrada e o respiro de virada não se
   aplica a ela. */
section#abertura{ padding-top:0; }
@media (max-width: 900px){ section{ padding-top:96px; padding-bottom:40px; } }

/* Subtópico dentro de uma seção (Logo · Cores · Tipografia) */
.subsection{
  padding-top:120px;
  scroll-margin-top:24px;
}
.subsection:first-of-type{ padding-top:16px; }
@media (max-width: 900px){ .subsection{ padding-top:80px; } }

.sub-title{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  color:var(--text);
  margin-bottom:24px;
}

/* ---------- 00 abertura ----------
   O bloco de números e o hero próprio saíram: a abertura passou a usar o
   mesmo .page-head das outras seções. */
/* ---------- utilitários de grid ---------- */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:32px;
}
@media (max-width: 700px){ .grid-2{ grid-template-columns:1fr; } }

/* ==========================================================================
   CABEÇALHO DE PÁGINA (padrão REF-1)
   Migalha + ação à direita, título em dois tons, intro em duas colunas.
   ========================================================================== */

.page-head{ padding-bottom:8px; }

.ph-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  /* O vão entre o marcador e o título é o que dá à abertura de seção
     a mesma altura de 900px da capa. */
  padding-bottom:225px;
}
@media (max-width: 700px){ .ph-top{ padding-bottom:64px; } }

/* Marcador de capítulo: número em Atrito + nome da seção.
   É o sinal de que um assunto acabou e outro começou. */
.section-mark{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:220px;
}
.sm-n{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--later-lastro);
  background:var(--gold);
  padding:5px 10px;
  border-radius:3px;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.sm-name{
  font-family:var(--font-brand-label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
  flex-shrink:0;
}
.sm-rule{
  flex:1;
  height:1px;
  background:var(--gold-dim);
  min-width:20px;
}
@media (max-width: 700px){ .sm-rule{ display:none; } }

.ph-action{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  border-bottom:none;
}
.ph-action .icon{ width:16px; height:16px; stroke-width:1.5; }
.ph-action:hover{ color:var(--gold); }

.ph-title{
  font-size:clamp(40px, 7vw, 82px);
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:400;
  max-width:760px;
  margin-bottom:96px;
  /* Reserva a altura de duas linhas: título de uma linha só encurtava a
     abertura da seção e o 900px variava de seção para seção. */
  min-height:2.04em;
}
/* Primeira metade do título recua; a segunda é a que fixa */
.ph-title .dim{ color:var(--text-dim); }

.ph-intro{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:40px;
  max-width:780px;
  padding-bottom:16px;
  /* Altura do caso mais longo (quatro linhas). Sem isso a abertura da
     seção variava 16px conforme o texto quebrava em 3 ou 4 linhas. */
  min-height:118px;
}
@media (max-width: 700px){ .ph-intro{ grid-template-columns:1fr; gap:20px; } }
.ph-lead{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  color:var(--text);
  margin:0;
}
.ph-body{
  font-size:17px;
  line-height:1.5;
  color:var(--text-muted);
  margin:0;
}


/* ==========================================================================
   BARRA DO CELULAR — fixa no topo, some a partir de 900px
   ========================================================================== */

.barra-mobile,
.bm-fundo{ display:none; }

@media (max-width: 900px){
  .barra-mobile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:fixed;
    top:0; left:0; right:0;
    height:56px;
    padding:0 20px;
    z-index:90;
    background:rgba(8,8,8,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .bm-marca{ display:flex; align-items:center; border-bottom:none; }
  .bm-marca img{ display:block; width:104px; height:auto; }

  /* Três traços que viram X quando a gaveta abre */
  .bm-menu{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px; height:40px;
    margin-right:-8px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
  }
  .bm-traco{
    display:block;
    width:22px; height:1.5px;
    margin-left:auto; margin-right:auto;
    background:var(--text);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .bm-menu[aria-expanded="true"] .bm-traco:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .bm-menu[aria-expanded="true"] .bm-traco:nth-child(2){ opacity:0; }
  .bm-menu[aria-expanded="true"] .bm-traco:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .bm-fundo{
    display:block;
    position:fixed;
    inset:0;
    z-index:75;
    background:rgba(0,0,0,.62);
  }
  .bm-fundo[hidden]{ display:none; }

  /* Trava a rolagem do documento enquanto a gaveta está aberta */
  body.menu-aberto{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .bm-traco{ transition:none; }
}