/* kartta by bygga: base de estilos do site e das páginas das ferramentas.
   Tokens da identidade (ver ../../01 Imagem/LEIA-ME.md). Sem fontes nem recursos externos. */
:root {
  --cor-fundo: #FFFFFF;            /* branco (decisão do Filipe, 11/10/2026); o off-white #F7F6F3 fica para os logótipos */
  --cor-base: #1D1F24;             /* carvão */
  --cor-acento: #CD001A;           /* vermelho do k */
  --cor-acento-tinte: #FBE9EB;     /* vermelho muito diluído, para fundos de aviso */
  --cor-linha: #D9D9D6;
  --cor-texto-secundario: #6B6E76; /* cinza médio */
  --cor-texto-terciario: #A3A5AA;  /* cinza claro */
  --dados-4: #A3A5AA;              /* nome herdado do CSS do RJUE (texto terciário) */
  --fonte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --altura-header: 72px;
  --margem: clamp(16px, 4vw, 48px);
  --largura-texto: 860px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--cor-fundo); color: var(--cor-base);
  font-family: var(--fonte); font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* Cabeçalho fixo: só o nome kartta; o endosso "by bygga" fica para a entrada e o rodapé */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--altura-header);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--margem); background: var(--cor-fundo); border-bottom: 1px solid var(--cor-linha);
}
.header-logo img { display: block; height: 48px; width: auto; }
.header-nav { display: flex; gap: 24px; font-size: 0.9375rem; color: var(--cor-texto-secundario); }
.header-nav a:hover, .header-nav a[aria-current="page"] { color: var(--cor-base); }

/* Rodapé: endosso, crédito de desenvolvimento e ligações legais */
.site-footer {
  margin-top: auto; padding: 32px var(--margem); border-top: 1px solid var(--cor-linha);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  font-size: 0.8125rem; color: var(--cor-texto-secundario);
}
.footer-logo img { display: block; height: 32px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a:hover { color: var(--cor-base); }
.footer-credit { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--cor-texto-terciario); }
.footer-credit img { height: 18px; width: auto; opacity: .9; }
.footer-credit:hover { color: var(--cor-base); }
.footer-credit:hover img { opacity: 1; }
.cobertura { max-width: 64ch; margin: 0; color: var(--cor-texto-secundario); }

/* Conteúdo abaixo do cabeçalho fixo */
.conteudo { padding: calc(var(--altura-header) + 48px) var(--margem) 96px; }
.conteudo > * { max-width: var(--largura-texto); margin-left: auto; margin-right: auto; }
.aviso {
  padding: 16px 20px; margin-bottom: 40px;
  background: var(--cor-acento-tinte); border-left: 2px solid var(--cor-acento);
  font-size: 0.9375rem; line-height: 1.55;
}
.aviso strong { font-weight: 600; }
.aviso a { border-bottom: 1px solid var(--cor-acento); }
.aviso a:hover { color: var(--cor-acento); }

@media (max-width: 640px) {
  :root { --altura-header: 64px; }
  .header-logo img { height: 40px; }
  .header-nav { display: none; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media print {
  .site-header, .site-footer, .aviso { display: none; }
  .conteudo { padding: 0; }
}

/* ---- Página de entrada ---- */
.entrada { padding: calc(var(--altura-header) + 64px) var(--margem) 0; max-width: 1120px; margin: 0 auto; }
.entrada-logo img { height: 56px; width: auto; display: block; }
.entrada h1 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; max-width: 24ch; }
.entrada .lead { font-size: 1.0625rem; color: var(--cor-texto-secundario); max-width: 60ch; margin: 0; }
.seccao { padding: 56px var(--margem) 0; max-width: 1120px; margin: 0 auto; }
.seccao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--cor-linha); padding-bottom: 12px; margin-bottom: 20px; }
.seccao h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.seccao-cabeca p { margin: 0; font-size: 0.9375rem; color: var(--cor-texto-secundario); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.tile { border: 1px solid var(--cor-linha); background: #FFFFFF; padding: 20px; min-height: 176px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.tile a.tile-link { position: absolute; inset: 0; }
.tile h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.tile p { margin: 0; font-size: 0.9rem; color: var(--cor-texto-secundario); line-height: 1.45; flex: 1; }
.tile .meta { font-size: 0.75rem; color: var(--cor-texto-terciario); }
.tile:hover { border-color: var(--cor-base); }
.tile.breve { background: transparent; }
.territorios { display: none; }
.tile.breve h3, .tile.breve p { color: var(--cor-texto-terciario); }
.estado { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.estado.disponivel { color: var(--cor-acento); }
.estado.teste { color: var(--cor-base); }
.estado.breve { color: var(--cor-texto-terciario); }
.territorios { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.territorios li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-acento); margin-right: 8px; vertical-align: middle; }
.consultoria { margin: 72px auto 0; max-width: 1120px; padding: 0 var(--margem); }
.consultoria-caixa { border-top: 2px solid var(--cor-base); padding: 24px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 16px 48px; align-items: center; }
.consultoria h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.consultoria p { margin: 0; color: var(--cor-texto-secundario); max-width: 64ch; }
.botao { display: inline-block; padding: 12px 20px; background: var(--cor-base); color: var(--cor-fundo); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.botao:hover { background: var(--cor-acento); }
.nota-rodape { max-width: 1120px; margin: 56px auto 0; padding: 0 var(--margem); font-size: 0.8125rem; color: var(--cor-texto-terciario); }
@media (max-width: 640px) { .consultoria-caixa { grid-template-columns: 1fr; } .seccao-cabeca { flex-direction: column; gap: 4px; } }

/* ---- Páginas de texto (termos, privacidade) ---- */
.texto { padding: calc(var(--altura-header) + 48px) var(--margem) 96px; max-width: 760px; margin: 0 auto; }
.texto h1 { font-size: 1.75rem; font-weight: 600; margin: 0 0 8px; }
.texto .data { color: var(--cor-texto-terciario); font-size: 0.875rem; margin: 0 0 32px; }
.texto h2 { font-size: 1.125rem; font-weight: 600; margin: 32px 0 8px; }
.texto p, .texto li { line-height: 1.6; }
.a-confirmar { background: #FFF3B0; padding: 0 4px; font-weight: 600; }
.texto .kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-acento); margin: 0 0 8px; }
.texto .lead { font-size: 1.0625rem; color: var(--cor-texto-secundario); margin: 0 0 24px; }
.texto .lista { padding-left: 20px; margin: 0 0 24px; }
.texto .lista li { margin-bottom: 8px; }
.texto .estado-nota { border-left: 2px solid var(--cor-linha); padding-left: 16px; color: var(--cor-texto-secundario); font-size: 0.9375rem; }
.texto .voltar { margin-top: 40px; font-size: 0.9375rem; }
.texto .voltar a { border-bottom: 1px solid var(--cor-linha); }

/* ---- Entrar ---- */
.site-header { gap: 16px; }
.header-nav { margin-left: auto; }
.botao-entrar { display: inline-block; padding: 8px 14px; border: 1px solid var(--cor-base); font-size: 0.875rem; font-weight: 600; color: var(--cor-base); white-space: nowrap; }
.botao-entrar:hover { background: var(--cor-base); color: var(--cor-fundo); }
.conta-form { display: grid; gap: 12px; max-width: 420px; margin: 24px 0; }
.conta-form label { font-size: 0.875rem; font-weight: 600; }
.conta-form input { padding: 12px 14px; border: 1px solid var(--cor-linha); background: #FFFFFF; font: inherit; color: var(--cor-base); }
.conta-form input:disabled, .conta-form button:disabled { opacity: .55; cursor: not-allowed; }
.conta-form button { padding: 12px 16px; background: var(--cor-base); color: var(--cor-fundo); border: 0; font: inherit; font-weight: 600; }