/* ==========================================================================
   CAMPO Life & Business · kit da marca em código · v1 (15/10/2026)
   Ticket 0 do site-v1. Fonte das cores: 05_Tokens/CAMPO_Cores_Oficiais_Produto.json
   (brandbook v1.0). Decisões e régua "Nunca" em kit.md.

   Fontes (Google Fonts, licença OFL). Colar no <head> de cada página:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,300;0,400;1,300&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">
   Ícones extras (só se os 4 do kit não bastarem): Phosphor regular
   <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css">
   ========================================================================== */

/* 1. Primitivos: cores oficiais, com os nomes do brandbook ------------------ */
:root {
  --verde-campo: #12372f;    /* Estrutura e reconhecimento */
  --verde-profundo: #0d2c25; /* "Verde noturno" no brandbook: navegação e bases densas */
  --salvia: #748b76;         /* Apoio e conexões visuais; nunca texto pequeno */
  --terracota: #b66b52;      /* Acento pontual (≈5%); nunca texto pequeno sobre claro */
  --creme: #f8f6f0;          /* Respiro e base editorial */
  --papel: #fffefa;          /* Superfícies e cartões; rótulo do botão primário */
  --tinta: #203a32;          /* Texto principal */
  --cinza-verde: #6c7a73;    /* Uso restrito: reprova texto comum (4,16:1 no creme) */
  --linha: #e5e6de;          /* Divisor decorativo; não delimita controle (1,25:1) */
  --suave: #eaf0e9;          /* "Névoa verde": áreas secundárias e agrupamento */
  --areia-dourada: #d1b48d;  /* Linhas e detalhes; sem efeito metálico */

  /* Derivados por contraste (mesma matiz, só luminosidade). Ver kit.md §2. */
  --cinza-verde-texto: #616e68; /* 4,93:1 no creme · 5,28:1 no papel · 4,61:1 na névoa */
  --terracota-texto: #9c5842;   /* 5,00:1 no creme · 5,35:1 no papel: erro e acento em texto pequeno */
}

/* 2. Semânticos (claro, padrão) -------------------------------------------- */
:root {
  --fundo: var(--creme);
  --fundo-alt: var(--suave);
  --superficie: var(--papel);
  --texto: var(--tinta);
  --texto-suave: var(--cinza-verde-texto);
  --titulo: var(--verde-campo);
  --acao: var(--verde-campo);
  --acao-hover: var(--verde-profundo);
  --acao-rotulo: var(--papel);
  --borda-controle: var(--salvia);       /* 3,65:1 no papel: identifica o campo */
  --divisor: var(--linha);
  --acento: var(--terracota);
  --acento-texto: var(--terracota-texto);
  --erro: var(--terracota-texto);
  --foco: var(--verde-campo);
  --marca-filtro: none;

  /* Tipografia */
  --fonte-texto: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fonte-titulo: "Noto Serif Display", "Iowan Old Style", Georgia, serif;

  /* Escala fluida: mínimo em 360 px, máximo em 1440 px (brandbook cap. 30) */
  --t-destaque: clamp(2.5rem, 2rem + 2.222vw, 4rem);       /* 40 → 64 · serif */
  --t-titulo: clamp(1.875rem, 1.667rem + 0.926vw, 2.5rem); /* 30 → 40 · serif */
  --t-secao: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);  /* 22 → 28 · sans */
  --t-lead: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);  /* 18 → 20 */
  --t-corpo: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);   /* 16 → 17 */
  --t-rotulo: clamp(0.8125rem, 0.792rem + 0.093vw, 0.875rem); /* 13 → 14 */

  --lh-titulo: 1.06;
  --lh-secao: 1.25;
  --lh-corpo: 1.55; /* faixa do brandbook: 1,45 a 1,6 */

  /* Espaço: base 4, recorrentes 8/16/24/32 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;
  --e-secao: clamp(64px, 40px + 6.667vw, 128px);
  --calha: clamp(16px, 4px + 3.333vw, 48px); /* 16 px no celular */
  --largura: 1200px;
  --medida: 60ch; /* linha de leitura */

  /* Raios concêntricos: externo = interno + respiro */
  --r-1: 6px;   /* tag de estado, imagem pequena */
  --r-2: 10px;  /* botão, campo, imagem dentro de card (16 − 6) */
  --r-3: 16px;  /* card */
  --r-4: 24px;  /* bloco recortado, mídia grande */

  /* Sombras mínimas: anel + profundidade curta; nunca halo colorido */
  --sombra-1: 0 0 0 1px rgb(32 58 50 / 0.08), 0 1px 2px rgb(32 58 50 / 0.05);
  --sombra-2: 0 0 0 1px rgb(32 58 50 / 0.08), 0 2px 4px rgb(32 58 50 / 0.04), 0 12px 24px -12px rgb(32 58 50 / 0.12);

  /* Movimento (brandbook cap. 41: 180 a 240 ms em interface) */
  --dur: 200ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --toque: 44px;
  --press: 0.96;

  --icone-traco: 1.5px;
}

/* Modo escuro: só os semânticos, preparado e não desenhado (fora do escopo v1) */
[data-theme="dark"] {
  --fundo: var(--verde-profundo);
  --fundo-alt: var(--verde-campo);
  --superficie: var(--verde-campo);
  --texto: var(--creme);
  --texto-suave: #bec6c0; /* creme a 75% sobre verde: 7,46:1 */
  --titulo: var(--creme);
  --acao: var(--creme);
  --acao-hover: var(--papel);
  --acao-rotulo: var(--verde-campo);
  --borda-controle: var(--salvia);
  --divisor: rgb(248 246 240 / 0.14);
  --acento-texto: var(--areia-dourada);
  --erro: var(--areia-dourada);
  --foco: var(--areia-dourada);
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums; /* números sempre alinhados */
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; color: var(--titulo); }
p, li { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--verde-campo); color: var(--papel); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

/* 4. Layout ---------------------------------------------------------------- */
.c-contem { width: 100%; max-width: calc(var(--largura) + 2 * var(--calha)); margin-inline: auto; padding-inline: var(--calha); }
.c-secao { padding-block: var(--e-secao); }
.c-pilha > * + * { margin-top: var(--pilha, var(--e-4)); }
.c-grade { display: grid; gap: var(--e-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 960px) { .c-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-6); } }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 5. Tipografia ------------------------------------------------------------ */
.c-destaque {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: var(--t-destaque);
  line-height: var(--lh-titulo);
  letter-spacing: -0.015em;
}
.c-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: var(--t-titulo);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.c-secao-titulo {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--t-secao);
  line-height: var(--lh-secao);
  letter-spacing: -0.01em;
}
.c-lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--medida); }
.c-texto { font-size: var(--t-corpo); max-width: var(--medida); }
.c-apoio { font-size: var(--t-rotulo); line-height: 1.45; color: var(--texto-suave); }
.c-enfase { font-family: var(--fonte-titulo); font-style: italic; font-weight: 300; }

/* 6. Marca (somente PNG oficial via <img>) --------------------------------- */
.c-marca { display: block; width: auto; height: var(--marca-altura, 32px); }
@media (min-width: 960px) { .c-marca--nav { --marca-altura: 40px; } }
.c-marca--rodape { --marca-altura: 56px; }
@media (min-width: 960px) { .c-marca--rodape { --marca-altura: 64px; } }
/* Assinatura completa: mínimo de 320 px de largura (brandbook cap. 23) */
.c-marca--assinatura { height: auto; width: 320px; }

/* 7. Navegação ------------------------------------------------------------- */
.c-nav { position: sticky; top: 0; z-index: 10; background: rgb(248 246 240 / 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--divisor); }
.c-nav__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; }
@media (min-width: 960px) { .c-nav__linha { min-height: 80px; } }
.c-nav__links { display: none; gap: var(--e-1); list-style: none; padding: 0; }
@media (min-width: 960px) { .c-nav__links { display: flex; } }
.c-nav__links a { display: inline-flex; align-items: center; min-height: var(--toque); padding-inline: var(--e-3); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: var(--r-2); transition: background-color var(--dur) var(--curva); }
.c-nav__links a:hover { background: var(--suave); }

/* 8. Botões ---------------------------------------------------------------- */
.c-botao {
  --b-fundo: var(--acao);
  --b-rotulo: var(--acao-rotulo);
  --b-borda: var(--acao);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque);
  padding: 0 var(--e-5);
  border: 1px solid var(--b-borda);
  border-radius: var(--r-2);
  background: var(--b-fundo);
  color: var(--b-rotulo);
  font: 600 1rem/1.2 var(--fonte-texto);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva), border-color var(--dur) var(--curva), transform 120ms var(--curva);
}
.c-botao:hover { --b-fundo: var(--acao-hover); --b-borda: var(--acao-hover); }
.c-botao:active { transform: scale(var(--press)); }
.c-botao--g { min-height: 52px; padding-inline: var(--e-6); font-size: 1.0625rem; }

/* Secundário: contorno verde (borda 12,05:1 no creme) */
.c-botao--contorno { --b-fundo: transparent; --b-rotulo: var(--acao); --b-borda: var(--acao); }
.c-botao--contorno:hover { --b-fundo: rgb(18 55 47 / 0.06); --b-borda: var(--acao); }

/* Terciário: texto sublinhado, área de toque mantida */
.c-botao--texto { --b-fundo: transparent; --b-borda: transparent; --b-rotulo: var(--acao); padding-inline: var(--e-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.c-botao--texto:hover { --b-fundo: transparent; --b-borda: transparent; text-decoration-color: currentColor; }
.c-botao--texto .ph { transition: transform var(--dur) var(--curva); }
.c-botao--texto:hover .ph { transform: translateX(3px); }

/* Sobre fundo escuro: creme com rótulo verde (12,05:1) */
.c-botao--claro { --b-fundo: var(--creme); --b-rotulo: var(--verde-campo); --b-borda: var(--creme); }
.c-botao--claro:hover { --b-fundo: var(--papel); --b-borda: var(--papel); }
.c-botao--contorno-claro { --b-fundo: transparent; --b-rotulo: var(--creme); --b-borda: rgb(248 246 240 / 0.6); }
.c-botao--contorno-claro:hover { --b-fundo: rgb(248 246 240 / 0.08); --b-borda: var(--creme); }

.c-botao .ph { font-size: 1.125rem; }
.c-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
/* Celular: botões cheios empilham na largura toda (larguras iguais); o terciário fica como texto */
@media (max-width: 559px) { .c-acoes > .c-botao:not(.c-botao--texto) { flex: 1 1 100%; } }

/* 9. Formulário ------------------------------------------------------------ */
.c-campo { display: grid; gap: var(--e-2); max-width: 420px; }
.c-campo__rotulo { font-size: 0.9375rem; font-weight: 600; color: var(--texto); }
.c-campo__ajuda { font-size: var(--t-rotulo); color: var(--texto-suave); }
.c-campo__entrada {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--e-4);
  border: 1px solid var(--borda-controle);
  border-radius: var(--r-2);
  background: var(--superficie);
  color: var(--texto);
  font: 400 1rem/1.4 var(--fonte-texto); /* 16 px: o iOS não dá zoom */
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.c-campo__entrada::placeholder { color: var(--cinza-verde-texto); opacity: 1; }
.c-campo__entrada:hover { border-color: var(--verde-campo); }
.c-campo__entrada:focus-visible { outline: none; border-color: var(--verde-campo); box-shadow: 0 0 0 1px var(--verde-campo), 0 0 0 4px rgb(18 55 47 / 0.14); }
.c-campo__erro { display: none; align-items: flex-start; gap: var(--e-2); font-size: 0.875rem; font-weight: 500; color: var(--erro); }
.c-campo__erro .ph { font-size: 1.125rem; flex: none; margin-top: 1px; }
.c-campo--erro .c-campo__entrada { border-color: var(--terracota-texto); box-shadow: 0 0 0 1px var(--terracota-texto); }
.c-campo--erro .c-campo__erro { display: flex; }

/* 10. Card ----------------------------------------------------------------- */
.c-card {
  display: grid; gap: var(--e-4); align-content: start;
  padding: var(--e-5);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}
.c-card--interativo { text-decoration: none; transition: box-shadow var(--dur) var(--curva), transform 120ms var(--curva); }
.c-card--interativo:hover { box-shadow: var(--sombra-2); }
.c-card--interativo:active { transform: scale(0.99); }
.c-card__midia { margin: calc(var(--e-5) * -1 + 6px) calc(var(--e-5) * -1 + 6px) 0; border-radius: var(--r-2); overflow: hidden; } /* 16 − 6 = 10 */
.c-card__midia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; outline: 1px solid rgb(0 0 0 / 0.08); outline-offset: -1px; }
.c-card__titulo { font: 600 1.125rem/1.3 var(--fonte-texto); color: var(--titulo); letter-spacing: -0.005em; }
.c-card__meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--divisor); }

/* 11. Tag discreta: linha fina + texto pequeno (nunca pill colorida) ------- */
.c-tag {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-rotulo); font-weight: 500; line-height: 1.3;
  color: var(--texto-suave);
}
.c-tag::before { content: ""; width: 16px; height: 1px; background: var(--tag-linha, var(--salvia)); flex: none; }
.c-tag--atencao { color: var(--acento-texto); --tag-linha: var(--terracota); }
.c-tag--ativa { color: var(--verde-campo); --tag-linha: var(--verde-campo); }

/* 12. Linha-tempo: marcadores ligados por linha fina (trajetória) ---------- */
.c-linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: passo; }
.c-linha-tempo__item {
  position: relative;
  display: grid; grid-template-columns: 24px 1fr; column-gap: var(--e-4);
  padding-bottom: var(--e-6);
  counter-increment: passo;
}
.c-linha-tempo__item:last-child { padding-bottom: 0; }
.c-linha-tempo__item::before { /* marcador */
  content: ""; grid-row: 1 / span 2;
  width: 11px; height: 11px; margin: 0.45em auto 0;
  border: 1px solid var(--titulo); border-radius: 50%;
  background: var(--fundo);
  position: relative; z-index: 1;
}
.c-linha-tempo__item::after { /* trajeto até o próximo */
  content: ""; position: absolute; left: 11.5px; top: calc(0.45em + 12px); bottom: 2px;
  width: 1px; background: var(--salvia);
}
.c-linha-tempo__item:last-child::after { display: none; }
.c-linha-tempo__item.is-atual::before { background: var(--terracota); border-color: var(--terracota); } /* o único ponto de acento */
.c-linha-tempo__titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--titulo); }
.c-linha-tempo__texto { grid-column: 2; margin-top: var(--e-1); color: var(--texto); max-width: 44ch; }

@media (min-width: 960px) {
  .c-linha-tempo--horizontal { grid-template-columns: repeat(var(--passos, 3), minmax(0, 1fr)); column-gap: var(--e-6); }
  .c-linha-tempo--horizontal .c-linha-tempo__item { grid-template-columns: 1fr; padding-bottom: 0; padding-top: var(--e-6); }
  .c-linha-tempo--horizontal .c-linha-tempo__item::before { position: absolute; grid-row: auto; top: 0; left: 0; margin: 0; }
  .c-linha-tempo--horizontal .c-linha-tempo__item::after { left: 11px; right: calc(var(--e-6) * -1); top: 5px; bottom: auto; width: auto; height: 1px; }
  .c-linha-tempo--horizontal .c-linha-tempo__texto { grid-column: 1; }
}

/* 13. Ícones do kit (sprite com o desenho original, traço fixo em px) ----- */
.c-icone { width: var(--icone, 32px); height: var(--icone, 32px); flex: none; color: var(--verde-campo); stroke-width: var(--icone-traco); }
.c-icone-rotulo { display: inline-flex; align-items: center; gap: var(--e-3); font-weight: 500; }
.c-icones { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--e-5) var(--e-7); list-style: none; padding: 0; }

/* 14. Blocos de cor inteiros (uma ideia por bloco; a cor é evento) -------- */
.c-bloco { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--e-secao); }
.c-bloco--verde {
  background: var(--verde-campo); color: var(--creme);
  --titulo: var(--creme); --texto: var(--creme); --texto-suave: #bec6c0; --divisor: rgb(248 246 240 / 0.14);
  --foco: var(--areia-dourada); --acento-texto: var(--areia-dourada); --salvia: rgb(209 180 141 / 0.7); --fundo: var(--verde-campo);
}
.c-bloco--verde .c-icone { color: var(--creme); }
.c-bloco--creme { background: var(--creme); }
.c-bloco--nevoa { background: var(--suave); }
/* Terracota: nenhuma cor de texto passa 4,5:1. Só texto grande em papel (3,99:1, ≥ 24 px)
   e botão papel com rótulo verde (12,9:1). Nada de parágrafo aqui. */
.c-bloco--terracota {
  background: var(--terracota); color: var(--papel);
  --titulo: var(--papel); --foco: var(--papel);
}
.c-bloco--terracota .c-botao { --b-fundo: var(--papel); --b-rotulo: var(--verde-campo); --b-borda: var(--papel); }
.c-bloco--terracota .c-botao:hover { --b-fundo: var(--creme); --b-borda: var(--creme); }
.c-bloco__conteudo { position: relative; z-index: 1; }

/* Trajetórias: em UM bloco só por página, sem disputar leitura.
   Celular: faixa no pé do bloco, depois do conteúdo (recorte central do SVG, onde está a interseção).
   Desktop: atrás do conteúdo, à direita, fora da coluna de texto. */
.c-trajetorias { display: block; position: relative; z-index: 0; pointer-events: none; width: 100%; height: 200px; max-width: none; margin-top: var(--e-7); margin-bottom: calc(var(--e-secao) * -1); }
@media (min-width: 960px) {
  .c-trajetorias { position: absolute; width: 900px; height: 900px; right: -180px; bottom: -260px; margin: 0; }
}
.c-trajetorias path { stroke-width: 1.5px; }
.c-bloco--verde .c-lead { max-width: 40ch; }

/* 15. Rodapé: moldura com One.Zi em segunda fileira ----------------------- */
.c-rodape { background: var(--verde-profundo); color: var(--creme); padding-top: var(--e-8); --foco: var(--areia-dourada); }
.c-rodape__topo { display: grid; gap: var(--e-7); padding-bottom: var(--e-7); }
@media (min-width: 960px) { .c-rodape__topo { grid-template-columns: 5fr 7fr; align-items: start; } }
.c-rodape__frase { margin-top: var(--e-5); font-family: var(--fonte-titulo); font-weight: 300; font-size: 1.5rem; line-height: 1.25; color: var(--creme); }
.c-rodape__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); }
@media (min-width: 960px) { .c-rodape__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-rodape__cabeca { font-size: var(--t-rotulo); font-weight: 500; color: var(--areia-dourada); margin-bottom: var(--e-2); }
.c-rodape__lista { list-style: none; padding: 0; }
.c-rodape__lista a { display: inline-flex; align-items: center; min-height: var(--toque); text-decoration: none; color: var(--creme); }
.c-rodape__lista a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.c-rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-2) var(--e-5); padding-block: var(--e-5); border-top: 1px solid rgb(248 246 240 / 0.14); font-size: var(--t-rotulo); color: #bdc4bd; /* creme 75%: 8,40:1 */ }
.c-rodape__base a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.c-rodape__onezi { display: inline-flex; align-items: center; min-height: var(--toque); }

/* 16. Acessibilidade e movimento ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .c-botao:active, .c-card--interativo:active { transform: none; }
}
@media (forced-colors: active) {
  .c-botao { border-color: ButtonText; }
  .c-linha-tempo__item::after, .c-tag::before { background: CanvasText; }
}