/* ==========================================================================
   NIVOR — CAMADA DE AJUSTES
   Carrega DEPOIS de tokens/base/components. Só contém correções medidas.
   Nada aqui muda leiaute: são defeitos de contraste e de respiro que já
   existem no site publicado.
   ========================================================================== */

/* 1 · Rótulo sobre papel rendia 4,14:1 (mínimo para texto é 4,5:1). */
:root{ --paper-ink-3:#657080; }          /* era #6B7686 — agora 4,52:1 */

/* 2 · O bloco .sec--paper do base.css redefine --ink, --line e
       --surface-glass, mas esquece o creme. Todo uso de creme em seção
       clara fica lavado — medido 1,01:1. O token passa a ter par claro. */
.sec--paper{
  --cream:      #816419;                 /* 4,66:1 sobre a faixa tingida */
  --cream-deep: #8A6D22;
  --line-cream: #C9A94A;
}

/* 3 · .prose só declara espaço entre blocos irmãos, nunca entre parágrafos
       do mesmo bloco — dois parágrafos saem colados e leem como um só. */
.prose p + p{ margin-top:var(--s-4); }


/* ==========================================================================
   ÍCONES DO SUBMENU
   Cinco silhuetas deliberadamente diferentes — zigue-zague, grade, funil,
   ciclo, ascendente — porque a 20px só o contorno sobrevive. Cada um carrega
   um ponto creme: onde a coisa se resolve. Mesmo grid de 24, mesmo traço.
   ========================================================================== */
.nav__panel a{
  display:grid; grid-template-columns:20px minmax(0,1fr);
  column-gap:var(--s-4); align-items:start;
}
.nav__ico{
  grid-row:1 / span 2;            /* o ícone ocupa as duas linhas do texto */
  width:20px; height:20px; margin-top:3px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--ink-3);
  transition:color var(--d-micro) var(--ease);
}
.nav__ico .p{ fill:var(--cream); stroke:none; opacity:.55; transition:opacity var(--d-micro) var(--ease); }
/* sem isto, .d desceria para a coluna do ícone */
.nav__panel .t, .nav__panel .d{ grid-column:2; }
.nav__panel a:hover .nav__ico{ color:var(--ink-2); }
.nav__panel a:hover .nav__ico .p{ opacity:1; }

/* O mesmo jogo de ícones na gaveta do celular — sem isso, o desktop tem
   ícone e o celular não, e a linguagem visual se parte no meio. */
.nav__drawer .sub{ display:flex; align-items:center; gap:var(--s-4); }
.nav__drawer .sub .nav__ico{ width:18px; height:18px; margin-top:0; flex:none; grid-row:auto; }

/* ==========================================================================
   NOTA SOB A TRILHA DAS FRENTES
   O leitor precisa saber, ainda na dobra, que governança/automação/
   inteligência se combinam ou se contratam sozinhas. A trilha nomeia as três;
   esta linha diz a relação entre elas.
   ========================================================================== */
.hero__note{
  margin-top:var(--s-4);
  max-width:52ch;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--ink-2);          /* --ink-3 e rotulo; isto e corpo de texto */
}

/* A trilha e flex-wrap: em 375 as tres etiquetas nao cabem numa linha e a
   terceira desce sozinha (2 + 1 orfa). Abaixo de 520 empilha as tres, para
   a quebra parecer decisao e nao sobra. */
@media (max-width:520px){
  .hero__rail{ flex-direction:column; gap:var(--s-3); }
}