/*
 * Site público do Zelo (landing + páginas por modelo).
 *
 * Deliberadamente SEPARADO de css/styles.css. O app é uma interface densa,
 * mobile-first, com estado; o site é texto para ler e um botão para clicar.
 * Carregar o CSS do app aqui traria 2.000 linhas de layout que nenhuma destas
 * páginas usa — e velocidade de carregamento é, ela própria, fator de
 * ranqueamento. Os tokens de cor são os mesmos de propósito: quem clica no
 * botão precisa reconhecer o produto do outro lado.
 */

:root {
  color-scheme: light dark;
  --bg: #F5F1EA;
  --surface: #FFFFFF;
  --surface-2: #F3EEE4;
  --text: #1B1A16;
  --text-soft: #6B655C;
  --border: #E4DDD1;
  --primary: #0E7C66;
  --primary-ink: #FFFFFF;
  --accent: #E08A1E;
  --grad-hero: linear-gradient(160deg, #0E7C66 0%, #0B5F50 100%);
  --radius: 16px;
  --maxw: 720px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /*
   * Cinza de LEITURA, distinto do cinza de METADADO.
   *
   * --text-soft dá 5,12:1 sobre --bg. Passa no AA, e é a cor certa para
   * legenda e rodapé. Só que ele também estava carregando texto para LER — a
   * lede do hero e o corpo de todos os cards. Texto de leitura nessa razão
   * parece desabilitado. #4E4840 dá 8,02:1 sobre --bg e 9,03:1 sobre
   * --surface, e devolve a --text-soft o significado de "secundário".
   */
  --text-mid: #4E4840;

  /*
   * Anel de foco. Com outline-offset o anel cai sempre sobre --bg ou
   * --surface, nunca sobre o próprio botão — por isso uma cor só serve para
   * todos os controles. 6,74:1 sobre --bg (o mínimo para elemento não-textual
   * é 3:1).
   */
  --focus: #0B5F50;

  /*
   * Verde de TEXTO, separado do verde de SUPERFÍCIE. --primary como cor de
   * link dá 4,56:1 sobre --bg (o mínimo é 4,5) e 4,44:1 sobre --surface-2 —
   * ou seja, já reprovava em link sobre superfície secundária. Escurecer só
   * para texto mantém --primary intacto no botão e no círculo dos passos.
   */
  --link: #0C6E5A;

  /*
   * Container LARGO, para o que é grade e não prosa.
   *
   * O site inteiro vivia em 720px. Isso é a medida certa para um parágrafo e a
   * errada para tudo o mais: no desktop, uma grade de seis cards espremida em
   * 720px deixa 700px de margem vazia dos dois lados e empilha os cards em duas
   * colunas magras. Prosa continua em --maxw; grade e herói usam este.
   */
  --maxw-wide: 1080px;

  /*
   * Cores de ESTADO do plano — vencido, perto de vencer, em dia.
   *
   * Existem porque a landing precisava mostrar o produto, e o produto é uma
   * lista de itens coloridos por urgência. Descrever isso em prosa, como a
   * página fazia, é pedir para a pessoa imaginar o que dá para ela ver.
   * Todas passam 4,5:1 sobre --surface nos dois temas.
   */
  /*
   * IDENTIDADE. O --accent existia desde o começo e nunca pintou um pixel.
   * Ele passa a ter UM trabalho: marcar atenção — a cor do aviso do painel,
   * nunca decoração. Como TEXTO ele dá 2,38:1 sobre --bg e reprova sempre;
   * por isso o âmbar aqui é só FORMA (filete, marca-texto), e texto âmbar usa
   * --accent-ink (5,26:1 no claro, 11,05:1 no escuro).
   */
  --accent-ink: #8A5A00;
  --rule: rgba(224, 138, 30, .55);   /* filete do olho de seção */
  --tick: var(--border);             /* tiques da régua de medição */
  --lip: rgba(11, 44, 36, .28);      /* aresta inferior do botão */
  --plate-hi: rgba(255, 255, 255, .85); /* brilho de 1px no topo da placa */

  --late: #B3261E;
  --late-bg: #FDECEA;
  --warn: #8A5A00;
  --warn-bg: #FDF3E2;
  --okc: #0E7C66;
  --okc-bg: #E4F3EF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130F;
    --surface: #1E1C17;
    --surface-2: #262319;
    --text: #F2EEE6;
    --text-soft: #A9A296;
    --border: #35312A;
    --primary: #3FBF9F;
    --primary-ink: #08211C;
    --text-mid: #D2CBBF;
    --focus: #3FBF9F;
    --link: #3FBF9F;
    /*
     * --grad-hero era o ÚNICO token sem versão escura: o número dos passos
     * seguia verde-escuro do tema claro dentro de um card escuro, ao lado de
     * um --primary que já tinha virado #3FBF9F. Com o gradiente claro, a
     * tinta do número passa a ser --primary-ink (7,36:1 no topo, 4,97:1 na
     * base — passa nos dois extremos).
     */
    --grad-hero: linear-gradient(160deg, #3FBF9F 0%, #2E9C81 100%);
    --accent-ink: #F0C070;
    --rule: rgba(240, 192, 112, .5);
    --lip: rgba(0, 0, 0, .55);
    /* 5% de branco é o que descola o card de 1,09:1 no escuro, onde sombra
       preta sobre fundo preto não faria nada. */
    --plate-hi: rgba(255, 255, 255, .05);

    --late: #FFB4AB;
    --late-bg: #2A1714;
    --warn: #F0C070;
    --warn-bg: #2A2115;
    --okc: #3FBF9F;
    --okc-bg: #14261F;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  /* Evita que qualquer bloco largo (tabela, código) role a página inteira. */
  overflow-x: hidden;
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }

img, svg { max-width: 100%; }

.muted { color: var(--text-soft); }
.small { font-size: 14px; }

/* ---- Cabeçalho e rodapé ------------------------------------------------ */

.site-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px;
  /* Estava em 1040px enquanto hero, main e rodapé estão em 720px: no desktop a
     marca ficava ~160px à esquerda do h1. Invisível no celular, que é por isso
     que passou despercebido. */
  max-width: var(--maxw);
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  text-decoration: none;
}

.site-mark { display: inline-flex; width: 24px; height: 24px; color: var(--primary); }
.site-mark svg { width: 24px; height: 24px; }

.site-nav { display: flex; align-items: center; gap: 12px; }
.site-nav a { text-decoration: none; font-size: 15px; }
/*
 * "Planos por modelo" era um <a> inline sem padding: o alvo era a caixa do
 * texto, 25px de altura. Virar inline-flex com min-height dá altura ao alvo
 * sem mudar nada visualmente. O peso 500 entra porque, sem sublinhado e em
 * cinza, esse link não parecia clicável.
 */
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-soft);
  font-weight: 500;
}
.site-nav a:not(.btn):hover { color: var(--text); }

.site-foot {
  max-width: var(--maxw);
  margin: 64px auto 0;
  padding: 28px 20px 56px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-soft);
}
.site-foot p { margin: 0 0 10px; }
.site-foot nav { margin-top: 8px; }
/*
 * Os links do rodapé eram <a> inline de 14px — 16px de alvo. Com os separadores
 * como texto (" · ") eles não podiam virar itens de flex sem que os pontos
 * virassem itens também; como CSS, o separador ainda some da árvore de
 * acessibilidade (o leitor de tela deixa de ler "ponto médio").
 */
.site-foot .foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}
.site-foot .foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}
.site-foot .foot-nav a + a::before {
  content: "·";
  position: absolute;
  left: -14px;
  color: var(--border);
}

/* ---- Botões ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px de alvo: abaixo disso o toque erra no celular, que é onde quase todo
     o tráfego de busca chega. */
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
/*
 * line-height próprio: com `font: inherit` o botão herdava o 1.65 do corpo e o
 * min-height NUNCA mordia — .btn-lg declarava 52px e renderizava 60px, .btn-sm
 * declarava 36 e renderizava 37. Com 1.2, o número escrito aqui é o número na
 * tela, e aí os alvos de toque passam a ser de fato o que dizem ser.
 *
 * :active porque no celular não existe :hover — sem ele o botão principal da
 * página não responde a nada ao ser tocado. E o tap-highlight sai: o retângulo
 * cinza padrão do iOS por cima de uma pílula fica torto.
 */
.btn {
  line-height: 1.2;
  transition: transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 6px 16px; font-size: 15px; }
.btn-lg { padding: 15px 28px; font-size: 18px; min-height: 52px; }

/*
 * Não existe exceção de desktop aqui, e já existiu: `@media (hover: hover) and
 * (pointer: fine)` encolhia o botão para 36px "porque no desktop 44 fica
 * gordo". A bancada pegou o problema — um iPad de toque reporta pointer:fine em
 * algumas condições e recebia o alvo pequeno. Consistência custa 8px de altura
 * num botão secundário; a exceção custava um alvo que erra o dedo.
 */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 28px 0;
}
.cta-note { font-size: 14px; color: var(--text-soft); }

/* ---- Conteúdo ---------------------------------------------------------- */

.site-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 20px 0;
}

/*
 * h3, summary e os <strong> de card não declaravam line-height e herdavam o
 * 1.65 do body: um h3 de 18px saía com 29,7px de entrelinha, mais solto que o
 * parágrafo abaixo dele. Título quer entrelinha curta — é o aperto entre as
 * linhas que faz o bloco ler como uma unidade. No celular quase todo h3 de
 * card quebra em duas linhas, então isso aparecia o tempo todo.
 */
h3,
.faq summary,
.steps strong,
.model-grid strong,
.site-brand { line-height: 1.3; }

h1 {
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 24px 0 12px;
  /* Equilibra o comprimento das linhas e mata a linha órfã de uma palavra.
     Onde não houver suporte, quebra como antes. */
  text-wrap: balance;
}

h2 {
  font-size: clamp(23px, 5vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  text-wrap: balance;
}

/* 19px contra o corpo de 16px do card = degrau real. Com 18px contra 17px de
   texto corrido não havia degrau nenhum: a hierarquia dependia só do peso. */
h3 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 8px; }

/* O navegador rola até o id; sem isto o título encosta no topo da janela. */
h1[id], h2[id] { scroll-margin-top: 16px; }

p { margin: 0 0 16px; }

/* Texto grande pede entrelinha proporcionalmente MENOR: 19px × 1.65 = 31px
   separa demais linhas que deveriam ler como um parágrafo só. */
.lede { font-size: 19px; line-height: 1.45; color: var(--text-mid); }
.lede strong { color: var(--text); }

.crumbs { font-size: 14px; color: var(--text-soft); margin: 6px 0 0; }
.crumbs a { color: var(--text-soft); }

/* ---- Tabela do plano --------------------------------------------------- */

/* A tabela é o conteúdo mais valioso da página e o mais largo. Ela rola dentro
   da própria caixa; a página nunca rola de lado. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.plan-table th, .plan-table td { padding: 12px 14px; text-align: left; }
.plan-table thead th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.plan-table tbody tr + tr th, .plan-table tbody tr + tr td { border-top: 1px solid var(--border); }
.plan-table tbody th { font-weight: 600; }
.plan-table td { white-space: nowrap; }

/* No celular a tabela não cabe com as três colunas em linha única. Ela rolaria
   (o .table-wrap cuida disso), mas a coluna de uso severo ficaria cortada na
   borda sem nenhum sinal de que existe mais conteúdo à direita — e ela é
   justamente a informação que quase nenhum concorrente dá. Aqui o texto quebra
   e as três colunas cabem na tela. */
@media (max-width: 560px) {
  .plan-table { font-size: 14px; }
  .plan-table th, .plan-table td { padding: 10px 10px; }
  .plan-table td { white-space: normal; }
  .plan-table thead th { font-size: 11px; white-space: normal; }
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Item por item ----------------------------------------------------- */

.item-grid { display: grid; gap: 14px; }

.item-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.item-card p { margin: 0 0 8px; font-size: 16px; }
.item-card p:last-child { margin-bottom: 0; }
.item-int { color: var(--primary); font-size: 15px !important; }

/* ---- FAQ --------------------------------------------------------------- */

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  margin-bottom: 10px;
}
/*
 * O padding de 14/18px estava no <details>, mas quem recebe o toque é o
 * <summary> — o alvo real era a caixa do texto, 28px. Movendo o padding para
 * dentro do summary, a linha inteira do card vira alvo, que é o que a pessoa
 * já tenta tocar de qualquer jeito.
 *
 * O marcador nativo também sai: com list-style-position:outside ele fica solto
 * na margem e desalinha quando a pergunta quebra em duas linhas no celular. O
 * chevron custa zero byte, fica ancorado à direita e girar comunica o estado
 * melhor que um triângulo.
 */
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 44px 12px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details[open] summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
.faq details > *:not(summary) { padding: 12px 18px 16px; }
.faq p { margin: 0; color: var(--text-mid); }

/* ---- Listas de links --------------------------------------------------- */

/*
 * Eram <a> inline de ~20px com 6px entre eles: seis alvos empilhados quase
 * encostados. Como são links de NAVEGAÇÃO e não uma lista em prosa, o marcador
 * não agrega — a linha inteira vira tocável.
 */
.link-list { list-style: none; padding: 0; }
.link-list li { margin-bottom: 0; }
.link-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
}
.link-list a:hover { background: var(--surface); text-decoration: underline; }

.model-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.model-grid a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.model-grid a:hover { border-color: var(--primary); }
.model-grid a { -webkit-tap-highlight-color: transparent; }
.model-grid a:active { background: var(--surface-2); }
.model-grid strong { display: block; font-size: 16px; }
.model-grid span { display: block; }

/* ---- Landing ----------------------------------------------------------- */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px 8px;
  text-align: center;
}
.hero h1 { margin-top: 8px; }
.hero .lede { font-size: 20px; max-width: 34ch; margin-left: auto; margin-right: auto; }
.hero .cta-row { justify-content: center; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-soft);
}

.steps { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: passo;
  position: relative;
  padding: 16px 18px 16px 60px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.steps li::before {
  content: counter(passo);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-hero);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.steps strong { display: block; }
.steps p { margin: 4px 0 0; font-size: 16px; color: var(--text-soft); }

.feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.feature h3 { margin-bottom: 4px; }
.feature p { margin: 0; font-size: 16px; color: var(--text-soft); }

.price-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.price-card .price { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.price-card .price small { font-size: 16px; font-weight: 500; color: var(--text-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; list-style: none; }
/*
 * As chips são o principal elemento de navegação da landing no celular e
 * mediam 41px: 7px de padding sobre uma caixa de linha de 24,75px (15px com o
 * 1.65 herdado). Com line-height 1.2 o min-height passa a mandar de fato.
 */
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.chips a:hover { border-color: var(--primary); }
.chips a:active { background: var(--surface-2); }

/* ---- Foco de teclado --------------------------------------------------- */

/*
 * Não existia UMA regra de foco neste arquivo. O outline padrão do Chrome usa
 * a cor do texto — sobre a pílula verde do .btn no tema escuro ele some. E sem
 * outline-offset o anel cola na borda das chips e dos cards de modelo, virando
 * "borda grossa" em vez de "anel".
 *
 * O offset é o que faz uma cor só funcionar em tudo: com 3px de afastamento o
 * anel cai sempre sobre --bg ou --surface, nunca sobre o próprio controle.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Sem isto o Firefox ainda desenha o anel dele por cima do nosso. */
:focus:not(:focus-visible) { outline: none; }

/* ---- Corpo de card: cor de leitura, não de metadado -------------------- */

.feature p,
.steps p,
.item-card p { color: var(--text-mid); }

/*
 * Densidade: o padding interno era 16–18px contra um gap externo de 14px.
 * Quando o espaço DENTRO ≈ o espaço ENTRE, o olho não separa figura de fundo,
 * e oito features (ou dezenove item-card numa página de modelo) viram uma
 * parede única. Ganha-se 8px por dentro e devolve-se 4px por fora, então a
 * página não fica mais alta.
 */
.feature,
.item-card,
.price-card { padding: 24px 20px; }
.steps li { padding: 24px 20px 24px 60px; }
.steps li::before { top: 22px; color: var(--primary-ink); }

.feature-grid, .item-grid, .steps, .model-grid { gap: 10px; }

/*
 * Sombra só no tema claro: --surface (#FFF) contra --bg (#F5F1EA) dá 1,126:1 e
 * a borda contra o card dá 1,35:1 — o card praticamente não se descola do
 * fundo. No escuro o mesmo par tem 1,092:1, mas ali a borda clara já resolve, e
 * sombra preta sobre fundo preto não faria nada. Duas camadas rasas: o objetivo
 * é dar aresta, não profundidade.
 */
@media (prefers-color-scheme: light) {
  .feature, .item-card, .steps li, .price-card, .faq details, .table-wrap, .model-grid a {
    box-shadow: 0 1px 2px rgba(27, 26, 22, .05), 0 1px 1px rgba(27, 26, 22, .03);
  }
}

/* ---- Perguntas de exemplo (landing) ------------------------------------ */

/*
 * As perguntas que a pessoa pode fazer ao assistente. São citações, não uma
 * lista de recursos: a aspas-cinza à esquerda é o que faz o olho ler como
 * "isto é fala", e é o que separa este bloco de mais um bullet de marketing.
 */
.quotes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.quotes li {
  padding: 10px 16px;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

/* ---- Hero -------------------------------------------------------------- */

/*
 * A lede em 34ch (~374px) embaixo de um h1 de 42px ocupando 680px criava um
 * funil no desktop. Igualando os dois blocos, o hero lê como uma coisa só. No
 * celular nenhum dos dois morde.
 */
.hero h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.hero .lede { font-size: 20px; line-height: 1.4; max-width: 46ch; }
.hero-proof { gap: 8px 16px; margin-top: 16px; }
/* O ✓ existe em toda fonte de sistema (custo zero) e é o sinal que a pessoa
   procura nessa posição: sem ele as três provas eram três frases soltas. */
.hero-proof li::before {
  content: "✓";
  color: var(--primary);
  font-weight: 700;
  margin-right: 6px;
}

.cta-center { justify-content: center; }

/* ---- Desktop ----------------------------------------------------------- */

@media (min-width: 760px) {
  /*
   * 680px de coluna a 17px dá ~80 caracteres por linha; a faixa confortável é
   * 66–75. Subir a fonte reduz a medida SEM estreitar a coluna — e a coluna não
   * pode estreitar, porque a tabela do plano precisa desses 680px.
   */
  body { font-size: 18px; }
}

/* ---- Higiene ----------------------------------------------------------- */

/*
 * O <meta viewport> declara viewport-fit=cover mas nenhum padding respeitava o
 * recorte: em iPhone com notch, em paisagem, o texto entrava debaixo dele. O
 * max() mantém os 20px de sempre onde não há recorte.
 */
.site-top, .hero, .site-main, .site-foot {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.site-foot { padding-bottom: max(56px, env(safe-area-inset-bottom)); }

/*
 * `overflow-x: hidden` no body faz o navegador criar uma caixa de rolagem, e
 * isso desativa position:sticky em qualquer descendente — um cabeçalho fixo no
 * futuro simplesmente não funcionaria e ninguém acharia a causa. `clip` recorta
 * igual sem criar a caixa. A declaração hidden fica antes, como reserva para
 * Safari < 16.
 */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Toda transição aqui é de 0,12–0,18s, mas quem pediu menos movimento pediu
   por um motivo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* ======================================================================= *
 * SISTEMA DE SEÇÕES
 *
 * A landing tinha 6.000px de coluna única, tudo no mesmo peso visual: nenhuma
 * seção se distinguia da anterior, e o olho não tinha onde descansar nem por
 * onde voltar. Duas ferramentas resolvem quase tudo isso sem imagem nenhuma:
 *
 *   1. FAIXAS. Uma seção com fundo próprio, de borda a borda, separa blocos
 *      melhor que qualquer margem — e de graça, porque é uma cor.
 *   2. LARGURA VARIÁVEL. Prosa em 720px (medida de leitura); grade de cards em
 *      1080px, porque seis cards em 720px viram duas colunas magras com 700px
 *      de margem morta dos lados.
 * ======================================================================= */

.band {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0 40px;
  margin: 56px 0;
}
.band > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
/* A faixa é filha de .site-main (720px). Puxar as bordas para fora devolve o
   sangramento total sem duplicar o container nem mexer no HTML das 78 páginas. */
.site-main > .band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/*
 * UMA BORDA ESQUERDA para a página inteira.
 *
 * O herói alinhava em 1080px e a prosa em 720px centrado — ou seja, o título do
 * herói começava 180px à esquerda do primeiro <h2>. Nenhum dos dois estava
 * errado sozinho; juntos, davam a impressão de dois layouts empilhados, que é
 * exatamente o que faz uma página parecer montada em vez de desenhada.
 *
 * A correção é uma régua só: o container da landing passa a 1080px, e a PROSA
 * fica limitada a 720px dentro dele, alinhada à esquerda — não centrada. Assim
 * herói, títulos, parágrafos, grades e faixas partem todos do mesmo ponto.
 *
 * Só a landing. As 78 páginas de modelo são prosa e tabela, sem nada largo: uma
 * coluna de 720px encostada na esquerda de um espaço de 1080px ficaria torta,
 * com meia tela vazia à direita e nada para preenchê-la. Lá, centrado é o certo.
 */
.site-main-wide { max-width: var(--maxw-wide); }
/*
 * Cabeçalho e rodapé entram na mesma régua. Eles ficam FORA do <main>, então
 * não bastava alargar o main: a marca "Zelo" continuava alinhada em 720px
 * enquanto o título do herói já estava em 1080, e o logotipo aparecia recuado
 * em relação à primeira linha da página — o tipo de desalinho que ninguém
 * nomeia e todo mundo sente.
 */
.lp .site-top, .lp .site-foot { max-width: var(--maxw-wide); }
.site-main-wide > h2,
.site-main-wide > h3,
.site-main-wide > p,
.site-main-wide > ol,
.site-main-wide > ul,
.site-main-wide > .faq,
.site-main-wide > .quotes { max-width: var(--maxw); margin-left: 0; margin-right: 0; }

/* A faixa sangra até a borda da tela; o conteúdo dela volta para a mesma régua. */
.site-main-wide > .band > * {
  max-width: var(--maxw);
  margin-left: max(20px, calc((100vw - var(--maxw-wide)) / 2));
  margin-right: 0;
  padding-left: 0;
  padding-right: 20px;
}

/* Dentro do container largo, `.wide` não precisa sangrar: já está no lugar. */
.site-main-wide > .wide { max-width: none; }

/* ======================================================================= *
 * MAQUETE DO PRODUTO
 *
 * O maior buraco da página era este: ela descrevia, em prosa, uma tela que a
 * pessoa poderia simplesmente VER. "Mostra o que está vencido, o que está perto
 * e o que está em dia" são doze palavras para o que três linhas coloridas dizem
 * num relance — e a cor é o produto.
 *
 * Feita em HTML e CSS puros, de propósito: nenhuma requisição, nenhum peso,
 * nada que desalinhe o layout ao carregar, e ela acompanha o tema escuro
 * sozinha (uma captura de tela não faria nenhuma dessas quatro coisas).
 * `aria-hidden` no HTML porque é ilustração: quem usa leitor de tela recebe o
 * texto da seção, que diz a mesma coisa.
 * ======================================================================= */

.mock {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(27, 26, 22, .10), 0 2px 6px rgba(27, 26, 22, .06);
  overflow: hidden;
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  .mock { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
}

.mock-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mock-veh { font-weight: 700; font-size: 15px; }
.mock-km { font-size: 13px; color: var(--text-soft); }

.mock-list { list-style: none; margin: 0; padding: 0; }
.mock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  font-size: 15px;
}
.mock-item + .mock-item { border-top: 1px solid var(--border); }
.mock-name { font-weight: 600; }

.mock-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.is-late .mock-tag { background: var(--late-bg); color: var(--late); }
.is-warn .mock-tag { background: var(--warn-bg); color: var(--warn); }
.is-ok   .mock-tag { background: var(--okc-bg);  color: var(--okc); }

/* Barra de urgência à esquerda: o estado tem de ser legível sem depender de
   distinguir vermelho de verde. */
.mock-item { border-left: 3px solid transparent; }
.is-late { border-left-color: var(--late); }
.is-warn { border-left-color: var(--warn); }
.is-ok   { border-left-color: var(--okc); }

.mock-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-soft);
}

/* ---- Herói ------------------------------------------------------------- */

.hero { max-width: var(--maxw-wide); }

/*
 * Duas colunas a partir de 900px. Abaixo disso a maquete vai para baixo do
 * texto, e não some: no celular ela é justamente a prova mais rápida de que
 * existe um produto do outro lado do botão.
 */
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; text-align: left; padding-top: 40px; }
  .hero-txt { min-width: 0; }
  .hero h1, .hero .lede { max-width: none; margin-left: 0; margin-right: 0; }
  .hero .cta-row, .hero-proof { justify-content: flex-start; }
}
.hero-mock { margin-top: 28px; }
@media (min-width: 900px) { .hero-mock { margin-top: 0; } }

/* ---- Passos ------------------------------------------------------------ */

/* Em telas largas os quatro passos viram duas colunas: empilhados, ocupavam
   uma tela inteira de rolagem para dizer "são quatro perguntas". */
@media (min-width: 800px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .site-main-wide > .steps { max-width: none; }
}

/* ---- Preço ------------------------------------------------------------- */

/*
 * O bloco de preço era uma caixa com borda igual a todas as outras — no ponto
 * da página em que ele precisa ser o objeto mais visível da tela.
 */
.price-card {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--primary);
  border-radius: 24px;
}
.price-card .price { font-size: 46px; }
.price-card .price small { font-size: 17px; }

/* ---- Grades ------------------------------------------------------------ */

@media (min-width: 900px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }

  /*
   * "Item por item" em duas colunas nas páginas de modelo.
   *
   * São de 9 a 19 cards curtos, empilhados numa coluna de 720px no meio de uma
   * tela de 1440: metade da página é margem vazia e o leitor rola 1.200px a
   * mais para ver a mesma coisa. Cada card é um bloco autônomo — não é prosa
   * corrida —, então ler em duas colunas não custa nada.
   *
   * O sangramento é o mesmo truque da faixa, porque estas páginas continuam com
   * o main em 720px (e devem continuar: o resto delas é texto).
   */
  .site-main:not(.site-main-wide) > article > .item-grid {
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(20px, calc((100vw - var(--maxw-wide)) / 2));
    padding-right: max(20px, calc((100vw - var(--maxw-wide)) / 2));
  }
}
.feature { transition: border-color .15s ease, transform .15s ease; }
@media (hover: hover) {
  .feature:hover { border-color: var(--primary); transform: translateY(-2px); }
}

/* Perguntas de exemplo lado a lado no desktop: quatro citações empilhadas
   viravam mais uma lista comprida numa página que já tinha listas demais. */
@media (min-width: 760px) {
  .quotes { grid-template-columns: 1fr 1fr; }
}
/* O bloco de preço é o único que continua centrado: ele é um objeto, não um
   parágrafo, e centrado é como um cartão de preço se lê. */
.site-main-wide > .price-card { margin-left: auto; margin-right: auto; }


/* ======================================================================= *
 * IDENTIDADE
 *
 * A passada anterior arrumou o SISTEMA — escala, foco, alvo de toque, faixas,
 * régua de largura. O resultado ficou correto e anônimo: nove <h2> pretos do
 * mesmo tamanho e do mesmo peso, caixas brancas iguais para três seções
 * semanticamente diferentes, e a única cor de urgência da página presa dentro
 * da maquete do herói, sem vazar para mais nada.
 *
 * A direção aqui é "chapa e traço": ficha de serviço bem cuidada. Tinta
 * grafite, verde de oficina, um âmbar que só quer dizer atenção, e estrutura
 * feita de FILETES E MARCAS DE MEDIÇÃO — porque o produto inteiro fala de
 * intervalo. Sem fonte nova: personalidade tipográfica sai de contraste de
 * escala de verdade, caixa-alta com entreletra larga, e algarismo tabular.
 *
 * REGRA QUE ATRAVESSA TUDO: gradiente decorativo só em pseudo-elemento. A
 * sonda de contraste da bancada sobe a árvore procurando quem pinta o fundo e
 * PULA qualquer elemento com background-image — pôr textura no body ou na
 * .hero desligaria em silêncio metade das 272 checagens.
 * ======================================================================= */

/* ---- Escala: o h1 dobra o h2 ------------------------------------------- */
/*
 * Era 42 contra 30, mesmo peso e mesma cor: razão 1,4. O olho não lê
 * "manchete e subtítulo", lê dois títulos do mesmo tipo empilhados — e a
 * página vira uma lista de nove títulos iguais. Em 54/27 a razão é 2,0, e aí
 * o h1 é manchete e o h2 é divisória.
 */
h1 { font-size: clamp(32px, 6.4vw, 54px); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(21px, 3.2vw, 27px); font-weight: 700; letter-spacing: -.015em; }

/* ---- Olho de seção ----------------------------------------------------- */
/*
 * Rótulo em caixa-alta com entreletra larga, atrás de um filete âmbar. É o
 * maior ganho de personalidade por byte do arquivo — e é o que a fonte de
 * sistema não dá sozinha. Só entra em h2 que declare data-kicker, então as 78
 * páginas de modelo seguem intactas.
 */
h2[data-kicker]::before {
  content: attr(data-kicker);
  display: block;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--rule);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---- Régua de medição: a textura da marca ------------------------------ */
/*
 * Tiques de 1px a cada 8px no topo de cada faixa. É uma escala de instrumento,
 * que é exatamente do que o produto trata — km, meses, faixa de plausibilidade.
 * Custa zero requisição e fica em pseudo, fora do fluxo e fora da sonda.
 */
.band { border-top: 0; position: relative; }
.band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background:
    linear-gradient(var(--border), var(--border)) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px);
  pointer-events: none;
}

/* ---- Placa, não caixa -------------------------------------------------- */
/*
 * Raio menor tira o ar de "bolha", e um brilho de 1px no topo acende a borda
 * superior e assenta a inferior. No escuro é esse brilho — não sombra — que
 * descola o card do fundo, porque --surface contra --bg lá dá 1,09:1.
 */
.feature, .item-card, .price-card, .faq details, .steps li,
.model-grid a, .table-wrap { border-radius: 12px; }
.mock { border-radius: 14px; }
.feature, .item-card, .steps li, .price-card, .faq details, .model-grid a {
  box-shadow: inset 0 1px 0 var(--plate-hi), 0 1px 2px rgba(27, 26, 22, .06);
}
@media (prefers-color-scheme: dark) {
  .feature, .item-card, .steps li, .price-card, .faq details, .model-grid a {
    box-shadow: inset 0 1px 0 var(--plate-hi);
  }
}

/* ---- Botão como peça, não pílula --------------------------------------- */
/*
 * `border-radius: 999px` é o carimbo de template de SaaS. 12px com uma aresta
 * inferior de 2px dá objeto físico, e o :active afunda a aresta em vez de
 * encolher o botão. A altura mínima não é tocada de propósito: a bancada
 * continua medindo 44 e 52px.
 */
.btn { border-radius: 12px; box-shadow: 0 2px 0 var(--lip); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--lip); }
.chips a, .link-list a { border-radius: 10px; }

/* ---- Números mecânicos ------------------------------------------------- */
/*
 * "1.000 km" e "20.000 km" não alinhavam em coluna com algarismo proporcional.
 * Tabular é a diferença entre planilha e instrumento — e a tabela do plano é o
 * conteúdo mais valioso das 78 páginas.
 */
.plan-table, .price, .mock, .tag, .mock-km, .model-grid span, .item-int {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Marca-texto ------------------------------------------------------- */
/* Gradiente que sobe a 62% da altura da palavra: grifo feito à mão. Vai num
   <span>, sobre texto que continua na cor de sempre. */
.mark {
  background-image: linear-gradient(transparent 62%, var(--rule) 62%);
  padding: 0 .06em;
}

/* ---- Soquete de ícone -------------------------------------------------- */
.ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--primary);
}
.ico svg { width: 22px; height: 22px; }

/* ---- Correções que as capturas mostraram ------------------------------- */
/*
 * `.steps strong { display: block }` atingia também o <strong> INLINE dentro
 * do parágrafo do passo — no card 1 a palavra "ano" ficava sozinha numa linha,
 * em negrito, partindo a frase em três. Só o <strong> que é filho direto do
 * <li> é título de passo.
 */
.steps strong { display: inline; }
.steps > li > strong { display: block; }

/*
 * Herói centralizado no celular quebrava a lede em sete linhas com rag ruim
 * ("garagem." sozinha na última). Alinhado à esquerda, o texto respira e a
 * página passa a ter uma margem só, do topo ao rodapé.
 */
@media (max-width: 899px) {
  .hero { text-align: left; }
  .hero .cta-row, .hero-proof { justify-content: flex-start; }
  .hero h1, .hero .lede { margin-left: 0; margin-right: 0; max-width: none; }
}

/* Dentro de uma faixa a coluna volta a 720px: três colunas dariam ~215px por
   card e título de três linhas. Duas mantêm o card legível em dez segundos. */
@media (min-width: 700px) {
  .feature-grid.grid-2 { grid-template-columns: 1fr 1fr; }
}