/* ==========================================================================
   Unasse — LAYOUT
   Grid de 12 colunas, container 1400, ritmo vertical, capítulos e travessia.
   Regra do §4.3: CADA seção pinta o próprio fundo em CSS estático. O body só
   cuida do overscroll e do fundo do header. JS off => página perfeita.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container e grid
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --------------------------------------------------------------------------
   Capítulos — cada um declara fundo, cor de texto e as variáveis de linha,
   foco e acento que os componentes consomem. Nenhum componente sabe se está
   no claro ou no escuro; ele lê a variável.
   -------------------------------------------------------------------------- */
[data-capitulo]{
  background:var(--fundo,var(--papel));
  color:var(--txt,var(--txt-claro));
  /* --grafico: o verde como elemento gráfico (permitido nos 4 capítulos).
     --acento : a cor de TEXTO de acento — verde só onde ele passa (escuro).
     Os dois são consumidos: ver .regua/.frente__itens/.ancora e .ponto. */
  --grafico:var(--verde);
}
[data-capitulo="profundo"]{
  --fundo:var(--marinho-profundo); --txt:var(--txt-escuro); --txt-2:var(--txt2-escuro);
  --linha-sutil:var(--linha-sutil-escuro);
  --foco:var(--txt-escuro);
  --acento:var(--verde);           /* verde como TEXTO: 7,45:1 aqui — permitido */
}
[data-capitulo="marinho"]{
  --fundo:var(--marinho); --txt:var(--txt-escuro); --txt-2:var(--txt2-escuro);
  --linha-sutil:var(--linha-sutil-escuro);
  --foco:var(--txt-escuro);
  --acento:var(--verde);           /* 6,69:1 — permitido */
}
[data-capitulo="papel"]{
  --fundo:var(--papel); --txt:var(--txt-claro); --txt-2:var(--txt2-claro);
  --linha-sutil:var(--linha-sutil-claro);
  --foco:var(--txt-claro);
  --acento:var(--txt-claro);       /* verde como texto aqui = 2,14:1 = PROIBIDO */
}
[data-capitulo="recuado"]{
  --fundo:var(--papel-recuado); --txt:var(--txt-claro); --txt-2:var(--txt2-claro);
  --linha-sutil:var(--linha-sutil-claro);
  --foco:var(--txt-claro);
  --acento:var(--txt-claro);
}

/* Fundo dinâmico: cuida só do canvas de overscroll e do fundo do header fixo.
   Escrito por js/behaviors/CapituloFundo.js NO <html> — é de lá que o canvas
   herda a cor. Sem JS, fica no valor inicial e a página continua correta. */
[data-bg="profundo"]{
  --bg-dinamico:var(--marinho-profundo);
}
[data-bg="marinho"]{
  --bg-dinamico:var(--marinho);
}
[data-bg="papel"]{
  --bg-dinamico:var(--papel);
}
[data-bg="recuado"]{
  --bg-dinamico:var(--papel-recuado);
}

/* --------------------------------------------------------------------------
   Ritmo vertical (§2.3)
   -------------------------------------------------------------------------- */
.secao{ padding-block:var(--ritmo-secao) }
@keyframes secao-sair{
  from{ opacity:1 }
  to{ opacity:0 }
}
@supports (animation-timeline:view()){
  main > .secao{
    animation:secao-sair 1ms linear both;
    animation-timeline:view();
    animation-range:exit 70% exit 100%;
  }
}
@media (prefers-reduced-motion:reduce){
  main > .secao{ animation:none; opacity:1 }
}
/* Duas seções do MESMO tom, uma depois da outra, não são duas superfícies:
   são um movimento só. Somando os dois paddings dava 320px de nada no xl —
   exatamente o vazio do A17 que a §5.1 diz ter trocado por Canto e cor.
   Colapsa para um ritmo. Não vale entre tons diferentes: ali o degrau de
   luminância É o argumento e precisa do ar. (Recomendação sev-1 do portão
   de design, aceita.) */
[data-capitulo="papel"] + [data-capitulo="papel"],
[data-capitulo="recuado"] + [data-capitulo="recuado"]{ padding-top:0 }
.secao__cabecalho{ margin-bottom:var(--ritmo-cabecalho-secao) }
.secao__cabecalho .t-h2{ margin-top:var(--e-16) }
.secao__cabecalho .t-sub{ margin-top:var(--e-24); color:var(--txt-2) }
/* H-07: a página tinha 8 h2 no mesmo degrau e razão de escala de 3,9x. Um
   único h2 sobe — o da travessia A->B, onde o argumento vira (§4.2 nº4).
   Sobe em TAMANHO, não em peso: o 900 continua exclusivo do h1. */
.travessia .secao__cabecalho .t-h2{
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  max-width:var(--m-h1);
}

/* --------------------------------------------------------------------------
   TRAVESSIA de capítulo (§4, §5.3) — escala XL, exatamente 2 por página.
   O Canto: chanfro superior-direito 2:1 + curva inferior-esquerda h/4.
   Orientação FIXA. A seção do capítulo novo sobe por cima da anterior.
   -------------------------------------------------------------------------- */
/* O capítulo que ENTRA carrega o chanfro superior-direito e sobe por cima do
   capítulo anterior; o capítulo que SAI carrega a curva inferior-esquerda, que
   é revelada justamente pela sobreposição. As duas metades do Canto ficam na
   mesma linha de fronteira, com a orientação fixa do manual: diagonal à
   direita, curva à esquerda. Um recurso por peça, nenhum aninhado.

   REGRA §5.2-A do brief (as duas gramáticas do Canto), decidida pela HOKUSAI
   a partir deste achado de render: peça com fundo próprio SOBRE outro fundo é
   OBJETO e leva as duas metades; peça de borda a borda da viewport é FRONTEIRA
   e leva SÓ o chanfro. No XL a curva seria relevo, e o Canto é recorte.
   O achado que originou a regra, para quem vier depois:
     (a) posta na própria seção da travessia, ela recorta o capítulo no meio e
         expõe o fundo do <body>, que é dinâmico — em parte da rolagem surge um
         arco escuro fantasma no meio da página (visto em captura, 1440x900);
     (b) posta na seção que SAI, ela some: para o chanfro do capítulo que entra
         revelar alguma coisa, esse capítulo precisa sobrepor o anterior — e a
         mesma sobreposição pinta por cima do canto arredondado.
   Espelhar para border-top-left-radius seria inverter a orientação fixa — uso
   proibido pelo manual. Não há terceira montagem.
   Trava de conformidade: EXATAMENTE uma regra de clip-path na home pode existir
   sem border-*-radius, e é esta. Travado em docs/verificar.py, bloco 6. */
.travessia{
  position:relative;
  z-index:1;
  margin-top:calc(var(--canto-xl-y) * -1);
  padding-top:calc(var(--ritmo-secao) + var(--canto-xl-y));
  clip-path:polygon(
    0 0,
    calc(100% - var(--canto-xl-x)) 0,
    100% var(--canto-xl-y),
    100% 100%,
    0 100%);
}
.antes-da-travessia{
  padding-bottom:calc(var(--ritmo-secao) + var(--canto-xl-y));
}

.hero{
  position:relative;
  z-index:2;
  /* o hero abre a página: começa depois do header fixo */
  padding-block:calc(var(--altura-cabecalho) + var(--e-32)) calc(var(--ritmo-secao) / 2);
}

/* --------------------------------------------------------------------------
   Cobertura — coluna-âncora fixa x coluna que rola. 03/10: os 4 grupos de
   serviço ficam à vista no índice; o trilho é uma coluna em todas as larguras.
   -------------------------------------------------------------------------- */
.cobertura{ display:grid; grid-template-columns:minmax(0,1fr);
            gap:var(--ritmo-cabecalho-secao) }
/* item de grade nasce com min-width:auto — sem isto o trilho horizontal da
   coluna-âncora estoura a página no zoom de texto em vez de rolar sozinho */
.cobertura__ancora,.cobertura__trilho{ min-width:0 }

@media (min-width:960px){
  .cobertura{
    grid-template-columns:repeat(var(--colunas),minmax(0,1fr));
    gap:var(--gap-grade);
    align-items:start;
  }
  .cobertura__ancora{
    grid-column:1 / span 3;
    position:sticky;
    top:calc(var(--cabecalho-real,var(--altura-cabecalho)) + var(--e-32));
  }
  .cobertura__trilho{ grid-column:5 / span 8 }

  /* Rodapé em grade de 12 no lg */
  .rodape__grade{
    grid-template-columns:repeat(var(--colunas),minmax(0,1fr));
    gap:var(--gap-grade);
  }
  .rodape__marca{ grid-column:1 / span 5 }
  .rodape__contato{ grid-column:6 / span 4 }
  .rodape__legal{ grid-column:10 / span 3 }
}