/* =========================================================================
   KN Tecnologia — Landing
   Fonte da verdade: "KN Tecnologia - Landing.dc.html" (artboards Desktop 1440,
   Mobile 390 e o artboard KN — Tokens, que virou os custom properties abaixo).

   ---------------------------------------------------------------------------
   INTERRUPTOR DOS RÓTULOS DE PRANCHETA
   Os rótulos "3.2 Hero", "3.4 Catálogo", … e o painel de amostras "Estados do campo"
   estão na página por decisão do dono. Para desligar TUDO de uma vez, descomente
   a linha abaixo:
   ---------------------------------------------------------------------------  */
/*  .rotulo-prancheta, .anotacao-prancheta { display: none !important; }  */

/* =========================================================================
   TOKENS  (artboard "KN — Tokens")
   ========================================================================= */
:root {
  /* Cor — só estas três. Cinza é preto com opacidade, nunca hex próprio. */
  --tinta:   #000000;
  --creme:   #F4F1E7;
  --cobalto: #1E3FFF;

  /* Opacidades do cinza.
     ATENÇÃO: elevadas em relação à prancheta (.4 .45 .5 .55 .6 .7) para cumprir
     WCAG AA sobre o creme — decisão do LEAD, rodada 1. NÃO baixar de volta para
     os valores da prancheta: a .4 mede 2,80:1 e reprova AA (pede 4,5:1).
     A ordem relativa foi preservada: o que era mais quieto segue mais quieto. */
  --o-rotulo:   .55;  /* prancheta .4  — rótulo de prancheta, legenda de seção   */
  --o-meta:     .60;  /* prancheta .45 — "Para quem", "Preço", "A partir de"     */
  --o-aviso:    .62;  /* prancheta .5  — "captura de tela a inserir"             */
  --o-nota:     .65;  /* prancheta .55 — "Resposta em até 4 horas úteis"         */
  --o-rodape:   .70;  /* prancheta .6  — segunda linha do rodapé                 */
  --o-footnote: .78;  /* prancheta .7  — "Nunca por hora…", nota do formulário   */
  --o-cobalto:  .88;  /* prancheta .6 sobre cobalto — creme sobre #1E3FFF        */

  /* Escala de espaçamento: 8 · 16 · 24 · 32 · 48 · 64 · 88 · 96 · 128 */
  --e-8: 8px;   --e-16: 16px; --e-24: 24px; --e-32: 32px;
  --e-48: 48px; --e-64: 64px; --e-88: 88px; --e-96: 96px; --e-128: 128px;

  /* Grade: desktop 12 colunas · calha 32 · margem lateral 64
            mobile  1 coluna    · margem lateral 20                  */
  --calha: 32px;
  --largura-max: 1440px;

  /* Espaçamento fluido. Cada clamp bate o valor do mobile 390 e o do desktop
     1440 exatamente (os limites do clamp são os próprios valores da prancheta). */
  --margem:  clamp(20px, 3.6149px + 4.1962vw, 64px);
  --sec-t:   clamp(40px, 22.1291px + 4.5771vw, 88px);
  --sec-b:   clamp(48px, 30.1291px + 4.5771vw, 96px);
  --hero-t:  clamp(36px, 21.1006px + 3.8152vw, 76px);
  --bloco-t: clamp(24px, 15.0434px + 2.2914vw, 48px);
  --bloco-b: clamp(28px, 17.5577px + 2.6724vw, 56px);
  --item-t:  clamp(22px, 13.7863px + 2.101vw, 44px);
  --item-b:  clamp(26px, 19.272px + 1.72vw, 44px);
  --leg-t:   clamp(20px, 16.9863px + 0.7676vw, 28px);
  --of-b:    clamp(28px, 20.5291px + 1.9105vw, 48px);
  --ofr-t:   clamp(20px, 17.7291px + 0.5771vw, 26px);
  --sobre-t: clamp(40px, 25.1006px + 3.8152vw, 80px);
  --sobre-b: clamp(44px, 27.6149px + 4.1962vw, 88px);
  --final-b: clamp(52px, 32.6434px + 4.9581vw, 104px);
  --rod-b:   clamp(40px, 34.0149px + 1.5295vw, 56px);
  --cab-y:   clamp(16px, 12.2434px + 0.9581vw, 26px);

  /* Escala tipográfica (px), verbatim do artboard de Tokens.
     Cada clamp bate 390 no mínimo e 1440 no máximo, exatamente. */
  --fs-hero:      clamp(52px, 20.0149px + 8.1962vw, 138px);  /*  52 → 138 */
  --fs-bloco-num: clamp(116px, 72.872px + 11.0533vw, 232px); /* 116 → 232 */
  --fs-bloco-tit: clamp(34px, 18.3577px + 4.0057vw, 76px);   /*  34 →  76 */
  --fs-final:     clamp(46px, 8.072px + 9.72vw, 148px);      /*  46 → 148 */
  --fs-sobre:     clamp(34px, 25.7863px + 2.101vw, 56px);    /*  34 →  56 */
  --fs-form-tit:  clamp(38px, 32.7577px + 1.339vw, 52px);    /*  38 →  52 */
  --fs-fato:      clamp(56px, 45.5577px + 2.6724vw, 84px);   /*  56 →  84 */
  --fs-cat-num:   clamp(26px, 7.3863px + 4.7676vw, 76px);    /*  26 →  76 */
  --fs-preco:     clamp(44px, 35.0434px + 2.2914vw, 68px);   /*  44 →  68 */
  --fs-prod:      clamp(24px, 18.0149px + 1.5295vw, 40px);   /*  24 →  40 */
  --fs-oferta:    clamp(26px, 22.2434px + 0.9581vw, 36px);   /*  26 →  36 */
  --fs-perg:      clamp(20px, 17.7291px + 0.5771vw, 26px);   /*  20 →  26 */
  --fs-corpo-g:   clamp(17px, 15.8434px + 0.2914vw, 20px);   /*  17 →  20 */
  --fs-corpo:     clamp(16px, 15.5863px + 0.101vw, 17px);    /*  16 →  17 */
  --fs-marca:     clamp(17px, 13.9863px + 0.7676vw, 25px);   /*  17 →  25 */
  --fs-cta-h:     clamp(11px, 9.8434px + 0.2914vw, 14px);    /*  11 →  14 */
  --fs-btn:       clamp(15px, 14.5863px + 0.101vw, 16px);    /*  15 →  16 */
  --fs-link:      clamp(13px, 12.5863px + 0.101vw, 14px);    /*  13 →  14 */
  --fs-stage:     clamp(9px, 8.2149px + 0.1962vw, 11px);     /*   9 →  11 */
  --fs-unit:      clamp(14px, 13.5863px + 0.101vw, 15px);    /*  14 →  15 */
  --fs-inclui:    clamp(14px, 13.5863px + 0.101vw, 15px);    /*  14 →  15 */
  --fs-oferta-p:  clamp(16px, 15.2149px + 0.1962vw, 18px);   /*  16 →  18 */
  --fs-ph-tit:    clamp(18px, 16.472px + 0.3867vw, 22px);    /*  18 →  22 */
  --fs-ph-p:      clamp(14px, 13.2149px + 0.1962vw, 16px);   /*  14 →  16 */
  --fs-depo:      clamp(12px, 11.5863px + 0.101vw, 13px);    /*  12 →  13 */
  --fs-meta-v:    clamp(12px, 11.5863px + 0.101vw, 13px);    /*  12 →  13 */
  --fs-micro:     clamp(9px, 8.5863px + 0.101vw, 10px);      /*   9 →  10 */
  --fs-micro-11:  clamp(10px, 9.5863px + 0.101vw, 11px);     /*  10 →  11 */
  --fs-rotulo:    clamp(9px, 8.5863px + 0.101vw, 10px);      /*   9 →  10 */
  --fs-peq: 12px;
}

/* Abaixo de 360px o piso de --fs-final desce. "funcionando?" é uma palavra só e,
   na Archivo 900 a 46px, ela mede 312px — 8px além dos 304 que sobram a 320px de
   viewport, o que abria rolagem HORIZONTAL de 320 a 327 (e reprovava o Reflow da
   WCAG 1.4.10 a 400% de zoom numa janela de 1280). A rampa chega exatamente a 46px
   em 360, então a 390 e a 1440 nada muda. */
@media (max-width: 359.98px) {
  :root { --fs-final: calc(15vw - 8px); }   /* 320 → 40px · 360 → 46px */
}

/* #whatsapp e #sob-medida levam ao MESMO lugar — a seção 3.8 inteira — e um elemento
   só pode ter um id. Este marcador de zero pixel é a âncora do WhatsApp; o
   scroll-margin desconta a borda e o padding da seção para ele pousar exatamente
   onde #sob-medida pousa: com o h2 "Precisa de um sistema que não existe?" no topo
   do viewport, e não com o rótulo do primeiro campo. */
.ancora-whatsapp {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--sec-t) + 1px);
}

/* =========================================================================
   BASE — a régua do mobile 390. O desktop 1440 entra em @media (min-width:1024px)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: Archivo, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
p { text-wrap: pretty; }   /* como na prancheta, que traz esta regra na folha global */
/* Nome de produto não parte no hífen. Na prancheta estas legendas são <div> e a regra
   global de <p> nunca as alcançava; aqui são <p>, então o nome é amarrado à mão. */
.junto { white-space: nowrap; }

/* O atributo hidden tem que vencer qualquer display declarado — sem isto, a caixa do
   formulário (display:flex) continua visível depois do envio. */
[hidden] { display: none !important; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
b, strong { font-weight: 700; }
a { color: var(--cobalto); text-decoration: none; }

/* Foco: borda/anel cobalto de 2px, verbatim do artboard de Tokens.
   Nunca outline:none sem substituto — ver .campo__entrada:focus. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 2px;
}

/* Envelope: max-width 1440 e a margem lateral (64 no desktop, 20 no mobile) */
.env {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* Régua de 1px preta, largura total, ancorando as seções.
   As demais réguas moram nas faixas do catálogo e nas faixas de oferta. */
.quem, .sob-medida, .perguntas, .sobre, .final, .rodape { border-top: 1px solid var(--tinta); }

.rotulo-prancheta {
  font: 500 var(--fs-rotulo)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: var(--o-rotulo);
  margin-bottom: 22px;
}
.rotulo-prancheta--cobalto { opacity: var(--o-cobalto); margin-bottom: 14px; }

.olho {
  font: 500 var(--fs-micro)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: var(--o-meta);
  margin-bottom: 8px;
}

/* ---------- Botões ---------- */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;                       /* alvo de toque: 52 (mínimo 48) */
  padding: 0 24px;
  font: 700 var(--fs-btn)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.01em;
  border: 0;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.botao--primario { background: var(--cobalto); color: var(--creme); }
.botao--secundario { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.botao--primario:hover { background-color: var(--tinta); }
.botao--secundario:hover { background-color: var(--tinta); color: var(--creme); }
.botao--cabecalho {
  width: auto;
  height: 52px;   /* o artboard mobile desenha 40, mas a folha de Tokens — que se declara
                     fonte da verdade para o código — manda "botão 52 de altura (mínimo 48)".
                     A camada normativa vence: 52 de caixa real, sem depender de ::after. */
  padding: 0 14px;
  font-size: var(--fs-cta-h);
}

.so-estreito { display: inline; }
.so-largo { display: none; }

/* =========================================================================
   3.1 Cabeçalho
   ========================================================================= */
.cabecalho { border-bottom: 1px solid var(--tinta); }
.cabecalho__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: var(--cab-y);
  padding-bottom: var(--cab-y);
}
.marca {
  font: 900 var(--fs-marca)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.035em;
}
.cabecalho__dir { display: flex; align-items: center; gap: 36px; }
.nav { display: none; gap: 26px; }
.nav a {
  /* 8+8 de folga vertical: a âncora media 10px de altura de 768 para cima (iPad), fina
     demais para dedo. O padding sobe a caixa para ~26 sem tocar na altura do cabeçalho,
     que quem manda é o botão de 52 (48 no desktop) ao lado. */
  padding: 8px 0;
  color: var(--tinta);
  font: 500 var(--fs-micro-11)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color 120ms linear;
}
.nav a:hover { color: var(--cobalto); }

/* =========================================================================
   3.2 Hero
   ========================================================================= */
.hero { padding: var(--hero-t) 0 var(--sec-b); }
.hero .rotulo-prancheta { margin-bottom: 24px; }   /* o hero respira 2px a mais que as outras seções */
/* No mobile "Rondonópolis, MT" sai de dentro do caminho de conversão (entre o parágrafo
   e os botões) e vai para depois da nota, sem sumir da página. No desktop volta para a
   coluna da direita da grade do hero, como na prancheta. */
.hero__int { display: flex; flex-direction: column; }
.hero__int > .rotulo-prancheta { order: 1; }
.hero__titulo { order: 2; }
.hero__grade  { display: contents; }
.hero__texto  { order: 3; }
.hero__acoes  { order: 4; }
.hero__nota   { order: 5; }
.hero__local  { order: 6; }
.hero__titulo {
  margin: 0 0 24px -6px;
  font: 900 var(--fs-hero)/.9 Archivo, Helvetica, sans-serif;
  letter-spacing: -.045em;
}
.hero__texto { font-size: var(--fs-corpo-g); line-height: 1.5; margin-bottom: 28px; max-width: 640px; }
.hero__local {
  margin-top: 18px;
  font: 500 var(--fs-micro)/1.6 Archivo, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: var(--o-meta);
}
.hero__acoes { display: flex; flex-direction: column; gap: 12px; }
.hero__nota {
  margin-top: 18px;
  font: 500 var(--fs-micro-11)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: var(--o-nota);
}

/* =========================================================================
   3.3 / 3.5 Blocos cobalto
   ========================================================================= */
.bloco {
  background: var(--cobalto);
  color: var(--creme);
  padding: var(--bloco-t) 0 var(--bloco-b);
  border-top: 0;
}
.bloco__num {
  font: 900 var(--fs-bloco-num)/.8 Archivo, Helvetica, sans-serif;
  letter-spacing: -.06em;
}
.bloco__titulo {
  margin-top: 14px;
  font: 900 var(--fs-bloco-tit)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.035em;
}

/* =========================================================================
   3.4 Catálogo
   ========================================================================= */
.catalogo { padding-top: var(--sec-t); }
.item { border-top: 1px solid var(--tinta); }
/* Mobile: a barra ocupa a coluna 1, o número entra na mesma linha do nome
   (coluna 2) e descrição/meta/link/mídia sangram da coluna 2 até o fim. */
.item__grade {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  column-gap: 10px;
  padding-top: var(--item-t);
  padding-bottom: var(--item-b);
}
.item__barra { grid-column: 1; grid-row: 1 / span 9; width: 6px; align-self: stretch; }
.item__barra--venda { background: var(--cobalto); }
.item__barra--preta { background: var(--tinta); }
.item__barra--tracejada { width: 0; border-left: 6px dashed var(--tinta); }
.item--tracejado .item__grade { grid-template-columns: 18px auto minmax(0, 1fr); }

.item__conteudo { display: contents; }
.item__num {
  grid-column: 2; grid-row: 1;
  align-self: baseline;
  font: 900 var(--fs-cat-num)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.04em;
}
.item__titulo {
  grid-column: 3; grid-row: 1;
  align-self: baseline;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.item__desc, .item__meta, .item__link { grid-column: 2 / -1; }
.item__nome {
  font: 800 var(--fs-prod)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.03em;
}
.item__estagio {
  font: 700 var(--fs-stage)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .16em;
}
.item__estagio--venda { color: var(--cobalto); }
.item__desc { font-size: var(--fs-corpo); line-height: 1.45; margin-bottom: 12px; max-width: 430px; }
/* O alvo de toque é a CAIXA do link, não um ::after: 17 + 17 + 18 = 52px de altura real.
   O sublinhado mora no <span> interno, então ele não desce junto com o padding, e as
   margens negativas devolvem exatamente o espaço que o padding tomou — nada se move. */
.item__link {
  justify-self: start;
  display: inline-block;
  padding: 17px 0 18px;
  margin-top: -3px;      /* 14 (margem da prancheta) − 17 (padding-top) */
  margin-bottom: -18px;  /* devolve o padding-bottom ao fluxo */
  font: 700 var(--fs-link)/1 Archivo, Helvetica, sans-serif;
  color: var(--cobalto);
  transition: color 120ms linear;
}
.item__link__texto {
  display: inline-block;
  border-bottom: 1px solid var(--cobalto);
  padding-bottom: 3px;
  transition: border-color 120ms linear;
}
.item__link:hover { color: var(--tinta); }
.item__link:hover .item__link__texto { border-bottom-color: var(--tinta); }
.item__midia { grid-column: 2 / -1; margin-top: 18px; }

.meta { font-size: var(--fs-meta-v); line-height: 1.6; }
.meta__linha { display: block; }
.meta dt {
  display: inline;
  font: 500 var(--fs-micro)/1.6 Archivo, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: var(--o-meta);
}
.meta dd { display: inline; margin: 0; }

/* A prancheta desenha a captura em duas proporções e nenhuma passa de 2,07:1
   (mobile 350 × 180 = 1,94:1 · desktop 620 × 300 = 2,07:1). Com altura FIXA em 180px
   e largura acompanhando o contêiner, a mesma captura chegava a 5,06:1 a 1023px —
   uma tarja em que o `object-fit: cover` mostrava campo vazio e guilhotinava o texto.
   Aqui a proporção é a do artboard mobile (330 × 180 = 11/6), o piso de 180px mantém
   a altura que o artboard mobile manda, e a largura para nos 550px que mantêm a altura
   dentro dos 300px do artboard desktop. */
.item__midia { max-width: 550px; }

.captura {
  width: 100%;
  height: auto;
  aspect-ratio: 11 / 6;
  min-height: 180px;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--tinta);
}
.captura--topo { object-position: top center; }
.captura--segunda { display: none; }   /* o artboard mobile mostra uma captura por faixa */

.reserva {
  /* `width` explícito: sem ele o Chrome resolve a largura A PARTIR do min-height pela
     proporção e a caixa estoura a coluna (378px numa tela de 320). */
  width: 100%;
  aspect-ratio: 11 / 6;
  min-height: 180px;
  border: 1px solid var(--tinta);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.reserva__nome {
  font: 800 var(--fs-ph-tit)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: -.02em;
}
.reserva__texto { font-size: var(--fs-ph-p); line-height: 1.35; margin-bottom: 10px; max-width: 360px; }
.reserva__aviso {
  font: 500 var(--fs-micro)/1 Archivo, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: var(--o-aviso);
}

.legenda { border-top: 1px solid var(--tinta); }
.legenda__grade {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--leg-t);
  padding-bottom: var(--sec-t);
}
.legenda__item { display: flex; gap: 10px; font-size: var(--fs-peq); line-height: 1.45; }
.legenda__barra { flex: none; width: 4px; align-self: stretch; }
.legenda__barra--venda { background: var(--cobalto); }
.legenda__barra--preta { background: var(--tinta); }
.legenda__barra--tracejada { width: 0; border-left: 4px dashed var(--tinta); }
.legenda__recuo { padding-left: 6px; }
.legenda__item--sembarra { padding-left: 14px; }

/* =========================================================================
   3.6 Como funciona
   ========================================================================= */
.ofertas { padding-top: var(--sec-t); }
.oferta { border-top: 1px solid var(--tinta); }
.oferta__grade { padding-top: var(--bloco-t); padding-bottom: var(--of-b); }
.oferta__nome {
  margin-bottom: 16px;
  font: 800 var(--fs-oferta)/1.05 Archivo, Helvetica, sans-serif;
  letter-spacing: -.03em;
}
.oferta__valor {
  font: 900 var(--fs-preco)/.9 Archivo, Helvetica, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;   /* "R$ 2.000" é um número só: nunca quebra depois do "R$" */
}
.oferta__unidade { margin-top: 6px; font-size: var(--fs-unit); line-height: 1.4; }
.oferta__texto { margin: 18px 0; font-size: var(--fs-oferta-p); line-height: 1.5; max-width: 520px; }
.oferta__inclui { font-size: var(--fs-inclui); line-height: 1.7; max-width: 520px; }
.ofertas__rodape {
  border-top: 1px solid var(--tinta);
  padding-top: var(--ofr-t);
  padding-bottom: var(--sec-t);
  font-size: var(--fs-peq);
  line-height: 1.5;
  opacity: var(--o-footnote);
}

/* =========================================================================
   3.7 Quem já usa
   ========================================================================= */
.quem { padding: var(--sec-t) 0 var(--sec-b); }
.quem__grade, .fatos { display: flex; flex-direction: column; gap: 24px; }
.fato { border-top: 1px solid var(--tinta); padding-top: 14px; }
.fato__num {
  font: 900 var(--fs-fato)/.85 Archivo, Helvetica, sans-serif;
  letter-spacing: -.05em;
}
.fato__texto {
  margin-top: 8px;
  font-size: var(--fs-corpo);
  line-height: 1.4;
  max-width: 360px;
  /* Na prancheta esta legenda é <div>, então a regra global de <p> não a alcança e ela
     quebra de forma gulosa: "…One Desk, Creator-OS," / "Arcarium". Aqui é <p>, então
     o pretty é desligado NESTE elemento — e só nele. */
  text-wrap: wrap;
}
.depoimento {
  border: 1px dashed var(--tinta);
  padding: 28px 20px;
  text-align: center;
  font: 500 var(--fs-depo)/1.5 Archivo, Helvetica, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* =========================================================================
   3.8 Sob medida — formulário
   ========================================================================= */
.sob-medida { padding: var(--sec-t) 0 var(--sec-b); }
.sob-medida__titulo {
  margin-bottom: 16px;
  font: 900 var(--fs-form-tit)/.95 Archivo, Helvetica, sans-serif;
  letter-spacing: -.04em;
}
.sob-medida__texto { margin-bottom: 32px; font-size: var(--fs-corpo); line-height: 1.5; max-width: 520px; }

.formulario { display: flex; flex-direction: column; gap: 22px; }
.isca { position: absolute; left: -9999px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.campo__rotulo {
  display: block;
  margin-bottom: 8px;
  /* line-height 1 fazia "Quantas pessoas trabalham com você?" quebrar em duas linhas a
     320px com ZERO pixel entre a descendente do "Q" e o acento do "Ê" da linha de baixo. */
  font: 500 10px/1.35 Archivo, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.campo__entrada {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: var(--creme);
  color: var(--tinta);
  border: 1px solid var(--tinta);
  font: 400 16px/1.4 Archivo, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
}
.campo__entrada--area { height: 120px; padding: 12px 14px; resize: none; }  /* a alça do Chrome é a única marca gráfica que não vem do desenho */
/* Substituto explícito do outline: a borda cobalto de 2px do artboard de Tokens */
.campo__entrada:focus { border: 2px solid var(--cobalto); outline: none; }

/* Erro: barra cobalto de 4px à esquerda, texto preto abaixo */
.campo.tem-erro .campo__entrada { border-left: 4px solid var(--cobalto); }
/* No grupo de escolha a barra fica na borda esquerda do próprio grupo, sem margem
   negativa: sangrar para fora da margem da página deixaria a barra colada na borda. */
.campo--grupo.tem-erro {
  padding-left: 12px;
  border-left: 4px solid var(--cobalto);
}
.campo__erro { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--tinta); }

.opcoes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid var(--tinta);
  font: 400 15px/1 Archivo, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.opcao__radio:checked + .opcao {
  background: var(--cobalto);
  border-color: var(--cobalto);
  color: var(--creme);
  font-weight: 700;
}
.opcao__radio:focus-visible + .opcao { outline: 2px solid var(--cobalto); outline-offset: 2px; }

/* Erro de envio: mesma linguagem do erro de campo — barra cobalto de 4px à esquerda,
   texto preto. Fica DENTRO da página; a pessoa nunca é levada para outro lugar. */
.envio-erro {
  border-left: 4px solid var(--cobalto);
  padding-left: 12px;
}
.envio-erro__texto { font-size: 13px; line-height: 1.4; color: var(--tinta); }
.botao[disabled] { cursor: default; opacity: 1; }

.formulario__nota {
  margin-top: 22px;
  font-size: var(--fs-peq);
  line-height: 1.5;
  opacity: var(--o-footnote);
}
.recebido { border: 1px solid var(--tinta); padding: 22px; }
.recebido:focus { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.recebido__frase {
  font: 800 var(--fs-ph-tit)/1.2 Archivo, Helvetica, sans-serif;
  letter-spacing: -.02em;
}
.recebido__nota { margin-top: 12px; font-size: var(--fs-ph-p); line-height: 1.45; }
/* Link de resgate do pop-up bloqueado: mesmo cobalto sublinhado dos links do catálogo,
   em caixa de 48 para o dedo (13px de padding davam 44 — abaixo do mínimo). O rótulo
   quebra em duas linhas a 320/360 e ainda assim não empurra a página para o lado. */
.recebido__link {
  display: inline-block;
  margin-top: 6px;
  padding: 16px 0;
  font: 700 var(--fs-link)/1.4 Archivo, Helvetica, sans-serif;
  color: var(--cobalto);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color 120ms linear;
}
.recebido__link:hover { color: var(--tinta); }
.recebido__link:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; }

/* Painel "Estados do campo": amostras estáticas, só no desktop */
.estados { display: none; }

/* =========================================================================
   3.9 Perguntas
   ========================================================================= */
.perguntas { padding: var(--sec-t) 0 var(--sec-b); }
.perguntas__grade { display: flex; flex-direction: column; gap: 28px; }
.pergunta { border-top: 1px solid var(--tinta); padding-top: 16px; }
.pergunta__titulo {
  max-width: 520px;
  margin-bottom: 10px;
  font: 800 var(--fs-perg)/1.15 Archivo, Helvetica, sans-serif;
  letter-spacing: -.02em;
}
.pergunta__texto { font-size: var(--fs-corpo); line-height: 1.5; max-width: 560px; }

/* =========================================================================
   3.10 Sobre
   ========================================================================= */
.sobre { padding: var(--sobre-t) 0 var(--sobre-b); }
.sobre__titulo {
  margin-bottom: 16px;
  font: 900 var(--fs-sobre)/.98 Archivo, Helvetica, sans-serif;
  letter-spacing: -.035em;
}
.sobre__texto { font-size: var(--fs-corpo); line-height: 1.5; max-width: 680px; }

/* =========================================================================
   3.11 Chamada final
   ========================================================================= */
.final { padding: var(--sec-t) 0 var(--final-b); }
.final__titulo {
  margin: 0 0 26px -4px;
  font: 900 var(--fs-final)/.92 Archivo, Helvetica, sans-serif;
  letter-spacing: -.045em;
}
.final__acoes { display: flex; flex-direction: column; gap: 12px; }

/* =========================================================================
   3.12 Rodapé
   ========================================================================= */
.rodape { padding: var(--leg-t) 0 var(--rod-b); }
.rodape__linha { font-size: var(--fs-peq); line-height: 1.6; }
.rodape__linha--fraca { margin-top: 8px; opacity: var(--o-rodape); max-width: 760px; }
.rodape__legais {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: var(--fs-peq);
  line-height: 1.6;
}

/* =========================================================================
   FAIXA INTERMEDIÁRIA — entre o artboard 390 e o artboard 1440
   A prancheta não desenha esta faixa. Aqui o esqueleto ainda é o de coluna única,
   mas o tipo já cresceu: sem estas regras os botões viram lajes de 900px de largura
   e o cabeçalho fica com meia barra vazia.
   ========================================================================= */
@media (min-width: 600px) {
  /* Botão volta a ter a largura do próprio rótulo, em vez de esticar na coluna. */
  .hero__acoes, .final__acoes { flex-direction: row; flex-wrap: wrap; gap: var(--e-16); }
  .hero__acoes .botao, .final__acoes .botao, .botao--enviar { width: auto; padding: 0 32px; }
  /* Escolhas em uma linha só, como no desktop, assim que couber. */
  .opcoes { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* A navegação volta antes do desktop: até aqui ela deixava a barra do cabeçalho vazia.
     O teto de 1023 é obrigatório: sem ele este gap de 20 vazava para o desktop, onde a
     prancheta manda 26 — e o bloco de 1024 só redeclara o `display`. */
  .nav { display: flex; gap: 20px; }
}

@media (max-width: 1023px) {
  /* Nesta faixa o tipo já cresceu mas a página ainda é de coluna única: sem um teto a
     linha chega a 108 caracteres, mais larga do que o artboard 1440 jamais mostra.
     O `ch` mede o glifo "0" — 0,49em na Archivo — e o caractere médio do português é
     mais estreito, então 60ch entregava 86 caracteres reais, não 60. Os valores abaixo
     estão calibrados pela CONTAGEM medida no navegador (teto: 70 caracteres reais),
     não pela unidade. Acima de 1024 valem só os valores em px da prancheta. */
  .hero__texto      { max-width: min(640px, 53ch); }
  .sobre__texto     { max-width: min(680px, 53ch); }
  .oferta__texto    { max-width: min(520px, 53ch); }
  .oferta__inclui   { max-width: min(520px, 53ch); }
  .pergunta__texto  { max-width: min(560px, 53ch); }
  .sob-medida__texto{ max-width: min(520px, 53ch); }
  .item__desc       { max-width: min(430px, 53ch); }
  .ofertas__rodape p, .rodape__linha { max-width: 53ch; }
}

/* =========================================================================
   DESKTOP — o artboard 1440
   ========================================================================= */
@media (min-width: 1024px) {

  .so-estreito { display: none; }
  .so-largo { display: inline; }

  .rotulo-prancheta { margin-bottom: 40px; }
  .rotulo-prancheta--cobalto { margin-bottom: 24px; }
  .olho { margin-bottom: 12px; }

  .botao { width: auto; height: 60px; padding: 0 32px; }
  .botao--cabecalho { height: 48px; padding: 0 24px; }

  /* 3.1 */
  .nav { display: flex; }

  /* 3.2 */
  .hero .rotulo-prancheta { margin-bottom: 44px; }
  .hero__int { display: block; }
  .hero__titulo {
    margin: 0 0 44px -26px;
    width: calc(100% + 58px);          /* 1312 + 58 = 1370, como na prancheta */
    font-size: var(--fs-hero);
    line-height: .88;
    letter-spacing: -.048em;
  }
  .hero__texto { margin-bottom: 0; }
  .item__desc { line-height: 1.5; margin-bottom: 20px; }
  .oferta__texto { margin: 0 0 var(--e-24); }
  .pergunta__texto { line-height: 1.55; }
  .pergunta__titulo { margin-bottom: 14px; line-height: 1.15; letter-spacing: -.025em; }
  .sobre__texto { font-size: var(--fs-corpo-g); }
  .reserva__texto { line-height: 1.4; margin-bottom: 12px; }
  .sob-medida__texto { margin-bottom: 0; }
  .hero__grade {
    display: grid;
    order: 0;
    grid-template-columns: minmax(0, 672fr) minmax(0, 608fr);
    gap: var(--calha);
    align-items: end;
  }
  .hero__local { text-align: right; margin-top: 0; }
  .hero__acoes { flex-direction: row; gap: var(--e-16); margin-top: 40px; }
  .hero__nota { margin-top: 22px; }

  /* 3.3 / 3.5 */
  .bloco__int { display: flex; align-items: flex-end; gap: 56px; }
  .bloco__titulo { margin-top: 0; padding-bottom: 14px; line-height: .95; letter-spacing: -.04em; }

  /* 3.4 */
  /* Desktop: uma linha só, quatro colunas — barra 8 · número 104 · texto · captura 620.
     As frações reproduzem 496/620 a 1440 e continuam fluidas abaixo disso. */
  .item__grade {
    grid-template-columns: 8px 104px minmax(0, 496fr) minmax(0, 620fr);
    column-gap: 28px;
    align-items: start;
  }
  .item--tracejado .item__grade { grid-template-columns: 8px 104px minmax(0, 496fr) minmax(0, 620fr); }
  .item__barra { grid-column: 1; grid-row: 1; width: 8px; align-self: stretch; }
  .item__barra--tracejada { width: 0; border-left: 8px dashed var(--tinta); }

  .item__conteudo { display: block; grid-column: 3; grid-row: 1; }
  .item__num { grid-column: 2; grid-row: 1; align-self: start; line-height: .85; letter-spacing: -.05em; }
  .item__titulo { gap: var(--e-16); margin-bottom: 14px; }
  .item__link { margin-top: 5px; }   /* 22 (margem da prancheta) − 17 (padding-top) */
  .item__midia { grid-column: 4; grid-row: 1; align-self: start; margin-top: 0; max-width: none; }

  .item--capacidade .item__conteudo { grid-column: 3 / -1; }
  .item__desc--larga { max-width: 760px; }
  .item__meta--larga { max-width: 600px; }

  .meta { display: flex; flex-direction: column; gap: var(--e-8); line-height: 1.5; }
  .meta__linha { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--e-16); }
  .meta dt, .meta dd { display: block; }
  .meta dt { line-height: 1.5; }

  /* A partir daqui vale a caixa do artboard desktop: 620 × 300, altura fixa. */
  .captura { height: 300px; aspect-ratio: auto; }
  .captura--segunda { display: block; }
  .item__midia--dupla { display: flex; gap: 12px; }
  .item__midia--dupla .captura { flex: 1; min-width: 0; }

  .reserva { height: 300px; aspect-ratio: auto; padding: 26px; }

  .legenda__grade {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    padding-bottom: var(--sec-t);
  }
  .legenda__item { gap: 12px; }
  .legenda__recuo { padding-left: var(--e-8); }
  .legenda__item--sembarra { padding-left: var(--e-16); }

  /* 3.6 */
  /* A prancheta desenha esta grade só a 1440, com coluna FIXA de 300 para o preço.
     Traduzida em `fr`, a coluna encolhia 31% de 1440 para 1024 enquanto o numeral
     encolhia 14% — e "R$ 2.000" quebrava depois do "R$", "Sistema sob medida" e
     "Operação assistida" em duas linhas. Os pisos abaixo são a largura medida do
     próprio texto (mais 4px), e são desligados pelo `min()` assim que a fração
     do artboard já dá conta: a 1440 vencem os 392fr e os 300fr, exatos. */
  .oferta__grade {
    display: grid;
    grid-template-columns:
      minmax(min(348px, calc(9.06vw + 217px)), 392fr)
      minmax(min(291px, calc(9.62vw + 152px)), 300fr)
      minmax(0, 556fr);
    gap: var(--calha);
    align-items: start;
  }
  .oferta__nome { margin-bottom: 0; line-height: 1.05; }
  .oferta__unidade { margin-top: var(--e-8); }
  .oferta__detalhe .olho { margin-bottom: 10px; }

  /* 3.7 */
  .quem__grade {
    display: grid;
    grid-template-columns: minmax(0, 928fr) minmax(0, 336fr);
    gap: var(--e-48);
    align-items: stretch;
  }
  .fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--calha); }
  .fato { padding-top: 18px; }
  .fato__texto { margin-top: 12px; }
  .depoimento { display: flex; align-items: center; justify-content: center; padding: var(--e-32); }

  /* 3.8 */
  .sob-medida__grade {
    display: grid;
    grid-template-columns: minmax(0, 392fr) minmax(0, 556fr) minmax(0, 300fr);
    gap: var(--calha);
    align-items: start;
  }
  .sob-medida__titulo { margin-bottom: 20px; }
  .formulario { gap: var(--e-24); }
  .formulario__nota { margin-top: 18px; }
  .campo__rotulo { margin-bottom: 10px; }
  .campo__entrada { height: 56px; font-size: 15px; }
  .campo__entrada--area { height: 132px; }
  .opcoes { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .opcao { height: 56px; }

  .estados {
    display: flex;
    flex-direction: column;
    gap: var(--calha);
    border-left: 1px solid var(--tinta);
    padding-left: 28px;
  }
  .estados__titulo {
    font: 500 var(--fs-rotulo)/1 Archivo, Helvetica, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: var(--o-rotulo);
  }
  .estado__nome {
    margin-bottom: 10px;
    font: 700 10px/1 Archivo, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .amostra--foco {
    height: 56px;
    border: 2px solid var(--cobalto);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 2px;
  }
  .amostra__texto { font: 400 15px/1 Archivo, Helvetica, sans-serif; }
  .amostra__cursor { width: 2px; height: 20px; background: var(--cobalto); }
  .amostra__escolhas { display: flex; gap: 10px; }
  .amostra__chip {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 var(--e-16);
    border: 1px solid var(--tinta);
    font: 400 14px/1 Archivo, Helvetica, sans-serif;
  }
  .amostra__chip--ativo {
    background: var(--cobalto);
    border-color: var(--cobalto);
    color: var(--creme);
    font-weight: 700;
  }
  .amostra--erro {
    height: 56px;
    border: 1px solid var(--tinta);
    border-left: 4px solid var(--cobalto);
  }
  .amostra__msg { margin-top: 10px; font-size: 13px; line-height: 1.4; }
  .amostra--enviado { border: 1px solid var(--tinta); padding: 22px; }
  .amostra__frase {
    font: 800 22px/1.2 Archivo, Helvetica, sans-serif;
    letter-spacing: -.02em;
  }
  .amostra__legenda { margin-top: 10px; font-size: 11px; line-height: 1.4; opacity: var(--o-rodape); }

  /* 3.9 */
  .perguntas__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px var(--calha); }
  .pergunta { padding-top: 20px; }

  /* 3.10 */
  .sobre__grade {
    display: grid;
    grid-template-columns: minmax(0, 504fr) minmax(0, 776fr);
    gap: var(--calha);
    align-items: start;
  }
  .sobre__titulo { margin-bottom: 0; line-height: .95; letter-spacing: -.04em; }

  /* 3.11 */
  .final__titulo { margin: 0 0 44px -22px; line-height: .88; letter-spacing: -.05em; }
  .final__acoes { flex-direction: row; gap: var(--e-16); }

  /* 3.12 */
  .rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1080fr) minmax(0, 200fr);
    gap: var(--calha);
    align-items: start;
  }
  .rodape__legais { justify-content: flex-end; margin-top: 0; }
}