/* ============================================================
   Truesail — cromo público canônico: cabeçalho e rodapé.

   Transcrição literal de `templates/landing.html` (`:16-56`, `:170-177`,
   `:187-194`, `:201-202`), com duas transformações e nada mais.

   DUAS INVARIANTES QUE NÃO PODEM CAIR:

   1. **Nenhum seletor nu.** Todo seletor começa por `nav[data-chrome="public"]`
      ou `footer[data-chrome="public"]`. A origem tinha `nav { }` e `footer { }`
      soltos, que alcançam TODO `<nav>` e `<footer>` do site. Depender de
      especificidade ou de ordem de carga para contê-los seria frágil: as duas
      coisas mudam por ação nossa, e classe de gancho é justamente o tipo de
      coisa que se apaga quando deixa de servir — foi o que aconteceu com as
      que existiam aqui. Escopo por atributo troca as duas por inércia por
      AUSÊNCIA: sem markup declarando `data-chrome`, nada alcança nada, e isso
      não depende de mais ninguém.

   2. **Todo token leva prefixo `--ts-`.** `--sienna` existe em `public.css:18`
      com o mesmo valor. Sem prefixo, e com esta folha carregando DEPOIS,
      a declaração daqui passaria a governar o `.btn-primary` de `/about` e
      `/pricing` — mexer no cromo mudaria botão de outra página, sem sinal.

   NÃO MIGRARAM, de propósito:
   - `--font-brand: 'Manrope'` — Manrope NÃO é carregada na superfície pública
     (`_base_public.html:28` traz só DM Sans e Space Mono). O token cairia em
     `sans-serif` do sistema, sem erro e sem aviso.
   - `--aqua` e `--aqua-dark` — teal é sistema aposentado (DR de marca).

   Ordem de carga: DEPOIS de `public.css`, antes do `{% block head %}`.
   ============================================================ */

:root {
  --ts-navy: #00182A;
  --ts-navy-light: #001F35;
  --ts-navy-deep: #001225;
  --ts-sienna: #E76F51;
  --ts-sienna-hover: #D4613F;
  --ts-base: #F7F9FE;
  --ts-surface-low: #F1F4F9;
  --ts-text-white: #EDEDEF;
  --ts-text-muted: #8A94A6;
  --ts-text-dim: #5A6478;
  --ts-warning: #F59E0B;
  --ts-error: #EF4444;
  --ts-font-ui: 'DM Sans', sans-serif;
  --ts-font-mono: 'Space Mono', monospace;
}

/* ── Neutralização de contexto ──────────────────────────────
   O cromo nasceu dentro de um documento que abre com
   `*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }`
   (`landing.html:35`) e SEM o preflight do Tailwind. Esta folha roda nos dois
   lados: nas 9 páginas do base, o preflight existe; nas 4 hardcoded (F4), não.

   As declarações abaixo existem para que o cromo não dependa de nenhum dos
   dois. Escopo forte não protege propriedade que não foi escrita — é o que
   fez o marcador de lista sumir na Frente C.
   ────────────────────────────────────────────────────────── */
nav[data-chrome="public"],
nav[data-chrome="public"] *,
nav[data-chrome="public"] *::before,
nav[data-chrome="public"] *::after,
footer[data-chrome="public"],
footer[data-chrome="public"] *,
footer[data-chrome="public"] *::before,
footer[data-chrome="public"] *::after {
  box-sizing: border-box;
}

/* `margin`/`padding` zerados explicitamente: sem o preflight (lado hardcoded)
   o default do navegador reaparece em `<p>`, `<ul>` e `<button>`. */
nav[data-chrome="public"] p,
nav[data-chrome="public"] ul,
nav[data-chrome="public"] ol,
nav[data-chrome="public"] li,
footer[data-chrome="public"] p,
footer[data-chrome="public"] ul,
footer[data-chrome="public"] ol,
footer[data-chrome="public"] li {
  margin: 0;
  padding: 0;
}

/* O cromo não tem lista hoje. A declaração é para que TENHA comportamento
   definido quando tiver — com preflight o marcador some, sem preflight ele
   aparece, e nenhum dos dois seria escolha. */
nav[data-chrome="public"] ul,
nav[data-chrome="public"] ol,
footer[data-chrome="public"] ul,
footer[data-chrome="public"] ol {
  list-style: none;
}

/* O preflight faz `button` herdar a fonte do documento; sem ele, o botão usa a
   fonte de UI do sistema. `.mobile-close` renderiza o caractere `×`, então a
   diferença é visível. */
nav[data-chrome="public"] button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* A fonte do cromo é DECLARADA, não herdada do corpo alheio. Sem esta regra a
   barra renderiza em DM Sans nas 12 páginas cujo `body` a declara e em Inter
   em `/contratos`, cujo `body` declara outra — o mesmo cabeçalho com dois
   desenhos de letra, sem que nada no arquivo dissesse por quê.

   O valor é o MESMO `--ts-font-ui` que as 12 já resolviam por herança, então o
   computado delas não muda; o que muda é a tipografia da barra deixar de ser
   decisão da página que a hospeda.

   CONTRAPARTIDA, e é o que separa esta declaração do `--font-brand: Manrope`
   que NÃO migrou (ver cabeçalho do arquivo): declarar família que a página não
   carrega cai em `sans-serif` do sistema, sem erro e sem aviso. Página que
   adota o cromo carrega a família do cromo — foi o que `/contratos` passou a
   fazer no mesmo commit desta linha. */
nav[data-chrome="public"],
footer[data-chrome="public"] {
  font-family: var(--ts-font-ui);
}

/* ── CABEÇALHO ──────────────────────────────────────────────
   Origem: `landing.html:40-56`, com UMA mudança estrutural.

   Na origem o próprio `<nav>` era `position: fixed`, e a compensação de topo
   ficava por conta de cada página. Aqui o `<nav>` fica NO FLUXO com a altura
   exata da barra — ele É o spacer — e quem flutua é a `.ts-bar` dentro dele.

   Por que não um spacer irmão do `<nav>`: enquanto as páginas de auth ainda
   escondiam este cabeçalho para exibir um próprio, um irmão sobreviveria à
   regra de esconder e plantaria 88px de vazio no topo das quatro. Elas hoje
   usam este cabeçalho e não escondem mais nada, mas a escolha segue certa —
   a caixa que reserva o espaço é a mesma que o ocupa, então não há como uma
   existir sem a outra.

   88px = 12px de padding + 64px de `.inner` + 12px. Os dois valores — a altura
   do `<nav>` e o padding da `.ts-bar` — mudam JUNTOS ou o conteúdo desalinha. */
nav[data-chrome="public"] {
  display: block;
  height: 88px;
  margin: 0;
  padding: 0;
}
nav[data-chrome="public"] .ts-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 12px 2rem;
  transition: all .3s;
}
nav[data-chrome="public"].scrolled .ts-bar {
  background: rgba(0,24,42,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
nav[data-chrome="public"] .inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
nav[data-chrome="public"] .logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* 70px, não os 80px da origem, porque o ASSET mudou e a caixa compensa.

   O lockup antigo trazia 12,5% de margem no próprio `viewBox` (640 de altura
   para 560 de conteúdo), então uma caixa de 80px desenhava marca de 70px. O
   asset novo é cortado justo, e 70px de caixa desenham 70px de marca — o mesmo
   pixel de antes, na altura e na largura (128px nos dois casos).

   Trocar o asset sem mexer aqui teria AUMENTADO a marca da barra em 14%. */
nav[data-chrome="public"] .logo-link .logo-img {
  height: 70px;
  width: auto;
  max-width: 280px;
  display: block;
}
nav[data-chrome="public"] .links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}
nav[data-chrome="public"] .links a {
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
  letter-spacing: -.01em;
}
/* A COR sai do bloco acima e ganha bloco próprio, restrita aos links de menu.
   Era ela — e só ela — que alcançava os dois CTAs: `.links a` é (0,2,2) e
   vencia o `.btn-login`, que é (0,2,1), então o botão "Entrar" nunca usou o
   branco que declara para si. Sobre navy saía apagado; sobre fundo claro,
   ilegível.

   Restringir aqui, em vez de empilhar um `.links a.btn-login` para vencer por
   especificidade: a segunda saída deixaria DUAS regras disputando a mesma
   propriedade, e a próxima cor de menu voltaria a atropelar o botão. Esta faz
   a regra dizer o que ela significa — cor de link de menu, não de CTA.

   As demais propriedades ficam no bloco compartilhado de propósito: tamanho,
   peso, `letter-spacing` e transição dos dois CTAs vêm de lá hoje, e movê-las
   junto mudaria o computado deles nas 13 páginas sem que ninguém pedisse. */
nav[data-chrome="public"] .links a:not(.btn-nav):not(.btn-login) {
  color: var(--ts-text-muted);
}
nav[data-chrome="public"] .links a:not(.btn-nav):not(.btn-login):hover { color: #fff; }

/* Os quatro `!important` de cor são da origem (`landing.html:48-51`) e existem
   para vencer o `a:visited`, que pinta texto de botão de roxo. Transcritos. */
nav[data-chrome="public"] .btn-nav,
nav[data-chrome="public"] .links a.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #E76F51;
  color: #FFFFFF !important;
  padding: 9px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .84rem;
  text-decoration: none;
  transition: all .2s;
  border: none;
  cursor: pointer;
  opacity: 1;
}
nav[data-chrome="public"] .btn-nav:visited,
nav[data-chrome="public"] .links a.btn-nav:visited { color: #FFFFFF !important; }
nav[data-chrome="public"] .btn-nav:hover,
nav[data-chrome="public"] .links a.btn-nav:hover {
  background: var(--ts-sienna-hover);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
nav[data-chrome="public"] .btn-nav:focus,
nav[data-chrome="public"] .links a.btn-nav:focus { color: #FFFFFF !important; }

nav[data-chrome="public"] .btn-login {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  padding: 9px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.3);
}
nav[data-chrome="public"] .btn-login:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}

nav[data-chrome="public"] .mobile-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
/* `display: block` não é cosmético e não é inerte no lado hardcoded. O
   preflight do Tailwind declara `svg { display: block }` e é ELE que segura o
   ícone alinhado nas 9 páginas do base — as hardcoded (F4) não carregam
   Tailwind, o `<svg>` volta a `inline` e passa a assentar na linha de base da
   fonte, ganhando o descender como altura extra dentro do botão. A declaração
   é redundante onde o preflight existe e necessária onde ele não existe. */
nav[data-chrome="public"] .mobile-menu svg {
  stroke: var(--ts-text-muted);
  display: block;
}
nav[data-chrome="public"] .mobile-close {
  display: none;
  background: none;
  border: none;
  color: #EDEDEF;
  font-size: 2.2rem;
  cursor: pointer;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  line-height: 1;
  padding: .5rem;
}

/* ── RODAPÉ ─────────────────────────────────────────────────
   Origem: `landing.html:171-177`. */
footer[data-chrome="public"] {
  padding: 2.5rem 2rem;
  margin: 0;
}
/* Quatro colunas: marca, Produto, Legal, Contato. A primeira é mais larga
   porque carrega o logo e a assinatura; as três de links dividem o resto. */
footer[data-chrome="public"] .inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}
footer[data-chrome="public"] .col {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}
footer[data-chrome="public"] .col-titulo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-text-dim);
  margin: 0 0 .2rem;
}
footer[data-chrome="public"] .col a {
  font-size: .84rem;
  color: var(--ts-text-muted);
  text-decoration: none;
  transition: color .2s;
  /* Endereço de e-mail é a string mais longa do rodapé e não tem espaço para
     quebrar: sem isto ele estoura a coluna em telas estreitas. */
  overflow-wrap: anywhere;
}
footer[data-chrome="public"] .col a:hover { color: #fff; }
footer[data-chrome="public"] .tagline {
  font-size: .78rem;
  color: var(--ts-text-dim);
  margin: 0;
}
footer[data-chrome="public"] .copyright {
  max-width: 1140px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .72rem;
  color: var(--ts-text-dim);
}

/* 70px: a MESMA caixa da barra. Os dois lugares desenham o mesmo asset de corte
   justo, e mantê-los em valores diferentes fazia a marca do rodapé sair menor
   que a do cabeçalho sem que nada no arquivo dissesse por quê. O 64px anterior
   era herança do lockup antigo, cuja margem embutida no `viewBox` já comia a
   diferença.

   A altura vive AQUI e só aqui. Markup do cromo NUNCA leva `style` inline de
   altura de logo: com o inline, cada página pode divergir em silêncio e o
   arquivo deixa de ser a fonte. Foi o que produziu a discrepância 28/64. */
/* `align-self: flex-start` NÃO é cosmético — é o que faz a marca alinhar.
   A coluna é um flex column, e o `align-items` padrão (`normal`, que resolve
   como `stretch`) estica o `<img>` até a largura inteira da coluna. A caixa ia
   a 220px de largura por 64px de altura, razão 3,44 contra 1,79 do viewBox; o
   SVG então se centralizava dentro dela (`preserveAspectRatio` padrão) e
   sobravam 53px de vazio de cada lado — a marca aparecia deslocada para dentro
   enquanto a tagline e as outras colunas alinhavam na margem.
   Medido: sem esta linha, caixa 220x64; com ela, 114x64, borda esquerda no
   mesmo pixel da tagline.

   Sem `margin-bottom`: o respiro até a tagline é o `gap` da coluna, o mesmo
   das outras três. A margem extra dobrava o vão só nesta. */
footer[data-chrome="public"] .footer-logo {
  height: 70px;
  width: auto;
  max-width: 220px;
  display: block;
  align-self: flex-start;
}

/* ── CONTEXTO DE FUNDO CLARO ────────────────────────────────
   O cromo nunca teve fundo próprio: o navy que se vê atrás dele nas outras 12
   páginas é o `body` DELAS. Em `/contratos`, cujo corpo é claro, o mesmo
   markup assenta sobre bege — o lockup é branco + sienna e a palavra da marca
   some, no cabeçalho e no rodapé; os links de menu e de rodapé, que são
   `--ts-text-muted`, caem a 2,91:1 contra o `#faf9f7` do corpo.

   O marcador declara o CONTEXTO no documento, e o cromo passa a trazer a chapa
   consigo em vez de contar com o fundo alheio. Markup, links e estrutura dos
   dois parciais seguem idênticos.

   É ATRIBUTO, não classe, pelo mesmo motivo da invariante 1 no cabeçalho deste
   arquivo: classe de gancho é justamente o tipo de coisa que se apaga quando
   deixa de parecer útil, e foi o que aconteceu com as que existiam aqui.

   Todo seletor daqui exige as DUAS pontas — o marcador no documento e o
   atributo de cromo no markup. Sem o marcador, nada alcança nada: as outras 12
   não têm como mudar, e a barra transparente no topo da landing continua
   transparente.

   Chapa OPACA, e não a translúcida do `.scrolled`: sobre bege,
   `rgba(0,24,42,.88)` resolve os links a 4,62:1 — passa raspando e ainda
   depende de `backdrop-filter`, que nem todo navegador honra; onde não honrar,
   o valor cai mais. O navy cheio devolve os mesmos 5,90:1 medidos nas outras
   12, sem depender de suporte a filtro.

   `.scrolled` fica INTOCADO e segue alternando por rolagem em toda página —
   aqui ele apenas não tem o que somar, porque a chapa já está posta desde o
   topo, que é o pedido. */
[data-chrome-ground="light"] nav[data-chrome="public"] .ts-bar {
  background: var(--ts-navy);
}
[data-chrome-ground="light"] footer[data-chrome="public"] {
  background: var(--ts-navy);
}

/* ── RESPONSIVO ─────────────────────────────────────────────
   Origem: `landing.html:187-194` e `:201-202`. O `@media(max-width:960px)`
   da origem (`:180-186`) não tem regra de cromo alguma e não migra. */
@media (max-width: 640px) {
  nav[data-chrome="public"] .links { display: none; }
  nav[data-chrome="public"] .logo-link img {
    height: 48px !important;
    max-width: 180px !important;
  }
  nav[data-chrome="public"] .mobile-menu { display: block; }
  nav[data-chrome="public"] .links.show {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,24,42,.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
  }
  nav[data-chrome="public"] .links.show a { font-size: 1.2rem; color: #EDEDEF; }
  nav[data-chrome="public"] .links.show a.btn-nav,
  nav[data-chrome="public"] .links.show a.btn-login {
    width: 80%;
    max-width: 300px;
    text-align: center;
    justify-content: center;
    padding: 14px 22px;
    font-size: 1rem;
  }
  nav[data-chrome="public"] .links.show .mobile-close { display: block; }

  /* As quatro colunas viram uma só. `grid-template-columns` sobrescrito em vez
     de trocar o `display` para flex: a origem empilhava um flex de dois filhos,
     aqui são quatro colunas de grid e trocar o modo de layout perderia o `gap`
     vertical calibrado acima. */
  footer[data-chrome="public"] .inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  footer[data-chrome="public"] .footer-logo {
    height: 40px;
    max-width: 160px;
  }
  footer[data-chrome="public"] .copyright { margin-top: 2rem; }
}

/* Entre 641px e 900px as quatro colunas ficam estreitas demais para o e-mail;
   duas por linha respiram sem empilhar tudo. */
@media (min-width: 641px) and (max-width: 900px) {
  footer[data-chrome="public"] .inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }
}