/* ===== in-kit.css · design system LB in 1.9.1 (dcbf845) ===== */
/* LB in Design System v1 · kit CSS (decisão Q22)
 *
 * Classes in-* prontas para qualquer projeto: Astro, Next, página estática, e-mail não.
 * Depende de in-tokens.css carregado antes. Nenhum valor solto aqui: tudo vem de token.
 */

/* ---------- Base ---------- */
.in-base {
  margin: 0;
  font-family: var(--in-fonte);
  font-size: var(--in-texto-corpo);
  line-height: var(--in-entrelinha-texto);
  color: var(--in-texto);
  background: var(--in-superficie);
  -webkit-font-smoothing: antialiased;
}
.in-base :where(h1, h2, h3, h4) { margin: 0; text-wrap: balance; }
.in-base :where(p) { margin: 0; text-wrap: pretty; }
.in-base :where(a) { color: var(--in-link); text-underline-offset: 3px; }
.in-base :where(:focus-visible) { outline: 3px solid var(--in-foco); outline-offset: 3px; }
.in-claro, [data-tema="claro"], .in-escuro, [data-tema="escuro"] { color: var(--in-texto); }
.in-container { width: 100%; max-width: var(--in-container); margin-inline: auto; padding-inline: var(--in-gutter); }

/* ---------- Tipografia ---------- */
.in-hero, .in-h1 { font-weight: var(--in-peso-display); font-stretch: var(--in-largura-display); line-height: var(--in-entrelinha-display); letter-spacing: var(--in-tracking-display); text-wrap: balance; }
.in-hero { font-size: var(--in-texto-hero); }
.in-h1 { font-size: var(--in-texto-h1); }
.in-h2 { font-size: var(--in-texto-h2); font-weight: var(--in-peso-titulo); font-stretch: var(--in-largura-titulo); line-height: var(--in-entrelinha-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.in-h3 { font-size: var(--in-texto-h3); font-weight: var(--in-peso-titulo); font-stretch: var(--in-largura-titulo); line-height: 1.2; }
.in-lede { font-size: var(--in-texto-grande); line-height: 1.5; color: var(--in-texto-2); max-width: var(--in-medida); text-wrap: pretty; }
.in-eyebrow { font-family: var(--in-fonte-mono); font-size: var(--in-texto-eyebrow); font-weight: 500; letter-spacing: var(--in-tracking-eyebrow); text-transform: uppercase; color: var(--in-link); }
.in-num { font-family: var(--in-fonte-mono); font-feature-settings: "tnum" 1; }
.in-in { color: var(--in-destaque); }

/* ---------- Botões ---------- */
.in-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--in-espaco-2);
  min-height: 48px; padding: 0 var(--in-espaco-6);
  border-radius: var(--in-raio-pilula); border: 1.5px solid transparent;
  font: var(--in-peso-forte) var(--in-texto-corpo)/1 var(--in-fonte);
  background: var(--in-acao); color: var(--in-acao-texto);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--in-duracao-rapida) var(--in-curva), transform var(--in-duracao-rapida) var(--in-curva);
}
.in-btn:hover { background: var(--in-acao-hover); }
.in-btn:active { transform: translateY(1px); }
.in-btn--secundario { background: transparent; color: var(--in-texto); border-color: var(--in-texto); }
.in-btn--secundario:hover { background: var(--in-borda); }
.in-btn--pequeno { min-height: 36px; padding: 0 var(--in-espaco-4); font-size: var(--in-texto-pequeno); }

/* ---------- Chips, status e selo de IA ---------- */
.in-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda-forte); font: 500 var(--in-texto-legenda)/1 var(--in-fonte-mono); letter-spacing: 0.04em; color: var(--in-texto); }
.in-chip--obra { background: var(--in-navy-900); color: var(--in-papel-50); border-color: transparent; }
.in-chip--obra::before { content: ""; width: 7px; height: 7px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--in-raio-s); font: 600 var(--in-texto-legenda)/1.2 var(--in-fonte); }
.in-status--sucesso { background: var(--in-sucesso-fundo); color: var(--in-sucesso); }
.in-status--atencao { background: var(--in-atencao-fundo); color: var(--in-atencao); }
.in-status--erro { background: var(--in-erro-fundo); color: var(--in-erro); }
.in-status--info { background: var(--in-info-fundo); color: var(--in-info); }
.in-selo-ia { display: inline-block; padding: 3px 5px; border-radius: 3px; background: var(--in-laranja); color: var(--in-navy-950); font: 600 9.5px/1 var(--in-fonte-mono); letter-spacing: 0.06em; vertical-align: 2px; }

/* ---------- Card ---------- */
.in-card { position: relative; background: var(--in-superficie-elevada); border: 1px solid var(--in-borda); border-radius: var(--in-raio-m); overflow: hidden; transition: box-shadow var(--in-duracao-media) var(--in-curva), transform var(--in-duracao-media) var(--in-curva); }
.in-card:hover { box-shadow: var(--in-sombra-m); transform: translateY(-2px); }

/* ---------- Campo de formulário ----------
 * <label class="in-campo"><span>Rótulo</span><input …><small>Ajuda ou erro</small></label>
 * Erro: atributo data-erro no rótulo. Máscara e limpeza dos dados seguem o padrão de formulário
 * da Meteora (nome em caixa de título, e-mail minúsculo, WhatsApp em E.164 no servidor). */
.in-campo { display: grid; gap: 8px; align-content: start; min-width: 0; }
.in-campo > span { font: 500 var(--in-texto-eyebrow)/1.2 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-texto-2); }
.in-campo :is(input, select, textarea), .in-selecao-botao {
  width: 100%; min-height: 52px; margin: 0;
  font: 400 var(--in-texto-corpo)/1.3 var(--in-fonte); color: var(--in-texto);
  padding: 14px 16px; border-radius: var(--in-raio-l);
  border: 1.5px solid var(--in-borda); background: var(--in-superficie-2);
  transition: border-color var(--in-duracao-rapida) var(--in-curva), box-shadow var(--in-duracao-rapida) var(--in-curva), background-color var(--in-duracao-rapida) var(--in-curva);
}
.in-campo :is(input, textarea)::placeholder { color: var(--in-navy-300); }
.in-campo :is(input, select, textarea):hover, .in-selecao-botao:hover { border-color: var(--in-borda-forte); }
.in-campo :is(input, select, textarea):focus-visible, .in-selecao-botao:focus-visible, .in-selecao.aberta .in-selecao-botao { outline: none; border-color: var(--in-laranja); background: var(--in-superficie-elevada); box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.16); }
/* Seta própria, longe da borda. Sem o JS, o select nativo já fica com a cara do kit. */
/* A seta acompanha o tema do contêiner mais próximo: laranja 700 no claro, laranja da marca no escuro. */
:root, .in-claro, [data-tema="claro"] { --in-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B84800' stroke-width='1.8'/%3E%3C/svg%3E"); }
.in-escuro, [data-tema="escuro"] { --in-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FF6900' stroke-width='1.8'/%3E%3C/svg%3E"); }
.in-campo select, .in-selecao-botao { appearance: none; -webkit-appearance: none; cursor: pointer; text-align: left; padding-right: 48px; background-image: var(--in-seta); background-repeat: no-repeat; background-position: right 18px center; }
.in-campo small { font-size: var(--in-texto-legenda); line-height: 1.45; color: var(--in-texto-2); }
.in-campo[data-erro] :is(input, select, textarea), .in-campo[data-erro] .in-selecao-botao { border-color: var(--in-erro); }
.in-campo[data-erro] small { color: var(--in-erro); }
.in-escuro .in-campo[data-erro] small { color: var(--in-erro-borda); }

/* Lista de seleção da marca (data-in="selecao" no select, in-efeitos.js): troca o menu do sistema. */
.in-selecao { position: relative; }
.in-selecao select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.in-selecao-lista { position: absolute; z-index: var(--in-z-sobreposto); left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: var(--in-raio-l); background: var(--in-superficie-elevada); border: 1px solid var(--in-borda-forte); box-shadow: var(--in-sombra-m); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity var(--in-duracao-media) var(--in-curva), transform var(--in-duracao-media) var(--in-curva), visibility 0s var(--in-duracao-media); max-height: 280px; overflow-y: auto; }
.in-selecao.aberta .in-selecao-lista { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.in-selecao-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--in-raio-m); cursor: pointer; color: var(--in-texto); }
.in-selecao-lista li[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-selecao-lista li.ativo, .in-selecao-lista li:hover { background: var(--in-superficie-2); }

/* ---------- Selo vivo ----------
 * O texto gira devagar em volta do símbolo "in", que fica parado. No site, use o atalho <in-selo>;
 * em outro projeto, copie o SVG do kit. Variações: padrão (navy 900), --laranja (escrita escura), --laranja-branco (escrita branca) e --creme. */
.in-selo { display: block; width: 160px; height: auto; overflow: visible; --selo-fundo: var(--in-navy-900); --selo-texto: var(--in-creme); --selo-in: var(--in-laranja); --selo-fio: rgba(255, 234, 219, 0.16); filter: drop-shadow(0 16px 24px rgba(8, 19, 24, 0.3)) drop-shadow(0 2px 3px rgba(8, 19, 24, 0.2)); }
.in-selo-fundo { fill: var(--selo-fundo); }
.in-selo-fio { fill: none; stroke: var(--selo-fio); stroke-width: 1; }
.in-selo-texto { font: 500 12.5px var(--in-fonte-mono); fill: var(--selo-texto); }
.in-selo-in { --logo-in: var(--selo-in); }
.in-selo-giro { transform-origin: 100px 100px; animation: in-selo-gira 50s linear infinite; }
.in-selo--laranja { --selo-fundo: var(--in-laranja); --selo-texto: var(--in-navy-950); --selo-in: var(--in-navy-900); --selo-fio: rgba(8, 19, 24, 0.22); }
.in-selo--laranja-branco { --selo-fundo: var(--in-laranja); --selo-texto: var(--in-branco); --selo-in: var(--in-navy-900); --selo-fio: rgba(255, 255, 255, 0.3); }
.in-selo--creme { --selo-fundo: var(--in-creme); --selo-texto: var(--in-navy-900); --selo-in: var(--in-laranja); --selo-fio: rgba(15, 28, 34, 0.14); }
@keyframes in-selo-gira { to { transform: rotate(360deg); } }

/* ---------- Arco · a assinatura gráfica ----------
 * Máscara em SVG, sem depender de defs na página. Use em contêiner quadrado ou quase:
 * os raios acompanham a proporção. A marca dentro do arco fica sempre fora do chanfro. */
.in-arco {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55.5 2Q57.5 0 60 0A40 41 0 0 1 100 41L100 69A31 31 0 0 1 69 100L7 100A7 7 0 0 1 0 93L0 60Q0 57.5 2 55.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55.5 2Q57.5 0 60 0A40 41 0 0 1 100 41L100 69A31 31 0 0 1 69 100L7 100A7 7 0 0 1 0 93L0 60Q0 57.5 2 55.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.in-arco-alto {
  /* Meio círculo em cima, reto embaixo, em qualquer proporção: o raio enorme é reduzido pelo navegador até
   * a metade da largura (regra de sobreposição do border-radius), então o topo é sempre um meio círculo. */
  clip-path: inset(0 round 100vmax 100vmax 0 0);
}

/* ---------- Progresso com ponta a 45° ---------- */
/* A barra é contêiner de tamanho: o corte mede a altura real (100cqh), então a ponta fica a 45° em
 * qualquer altura. O ponto na quina de cima marca o valor exato; a cor vem de --in-progresso-ponto. */
.in-progresso { position: relative; box-sizing: border-box; inline-size: 100%; height: 12px; border-radius: 2px; container-type: size; background: repeating-linear-gradient(-45deg, var(--in-borda-forte) 0 2px, transparent 2px 6px); }
.in-progresso > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; width: var(--valor, 0%); background: var(--in-destaque); clip-path: polygon(0 0, 100% 0, max(0px, calc(100% - 100cqh)) 100%, 0 100%); transition: width var(--in-duracao-lenta) var(--in-curva); }
.in-progresso::after { content: ""; position: absolute; top: 0; left: var(--valor, 0%); height: 36%; min-height: 4px; aspect-ratio: 1; border-radius: 50%; background: var(--in-progresso-ponto, var(--in-texto)); transform: translate(-50%, -50%); transition: left var(--in-duracao-lenta) var(--in-curva); pointer-events: none; }

/* ---------- Malha de fundo ---------- */
.in-malha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%2325414E' stroke-opacity='.12'%3E%3Cpath d='M0 .5H320M0 160.5H320M.5 0V320M160.5 0V320'/%3E%3Cpath d='M.5 320A319.5 319.5 0 0 1 320 .5'/%3E%3C/g%3E%3C/svg%3E");
}
.in-escuro .in-malha, .in-escuro.in-malha, [data-tema="escuro"] .in-malha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23FAF8F5' stroke-opacity='.09'%3E%3Cpath d='M0 .5H320M0 160.5H320M.5 0V320M160.5 0V320'/%3E%3Cpath d='M.5 320A319.5 319.5 0 0 1 320 .5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Logo ----------
 * O SVG do logo usa fill="var(--logo-a)" e fill="var(--logo-i)". Esta classe liga os dois
 * aos papéis do tema, então o logo troca de versão sozinho no claro e no escuro. */
.in-logo { display: block; height: auto; --logo-lb: var(--in-logo-lb); --logo-in: var(--in-logo-in); --logo-a: var(--in-logo-a); --logo-i: var(--in-logo-i); }

@media (prefers-reduced-motion: reduce) {
  .in-btn, .in-card, .in-progresso > i, .in-progresso::after, .in-selecao-lista { transition: none; }
  .in-selo-giro { animation: none; }
  .in-card:hover { transform: none; }
}