/* Responsive layer for the website UI kit — collapses grids and the header
   at the breakpoints promised in the design system guidelines (1024/768px). */

.wrap{max-width:1400px;margin:0 auto;padding:0 40px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* 1fr/2fr deixava 234px para o texto das linhas do painel — 16px a menos do
   que o e-mail precisa, e ele quebrava em duas linhas bem no meio do domínio.
   Em 1fr/1.6fr sobram 307px, e o formulário continua com folga de sobra para
   os seus dois campos por linha. */
.grid-contato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px}
.grid-form{display:grid;grid-template-columns:1fr 1fr}
.grid-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}

.hero-stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:48px;justify-content:flex-start}

/* Números — painel de leitura em vez de cartões. O que separa as medidas é
   um fio de 1px; o traço verde marca o começo de cada célula. */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-7);border-top:1px solid var(--border)}
.stat-cell{--pl:var(--space-4);position:relative;padding:var(--space-4) var(--space-4) 0 var(--pl);border-left:1px solid var(--border)}
.stat-cell:first-child{--pl:0px;border-left:0}
.stat-cell::before{content:'';position:absolute;top:-1px;left:var(--pl);width:40px;height:2px;background:var(--green-500)}
.stat-value{display:block;font-family:var(--font-display);font-size:clamp(2.75rem,4.4vw,4rem);font-weight:var(--fw-extrabold);line-height:.88;letter-spacing:var(--ls-display);color:var(--text-primary);font-variant-numeric:tabular-nums}
/* A barra do "24/7" desce 12px abaixo da linha dos algarismos na Big Shoulders:
   onde o 2, o 4 e o 7 param, ela ainda continua, e passa por baixo da caixa do
   número. Duas coisas encostavam a barra no "p" de "própria": o rótulo vinha
   como <span> no template do hero, e margem vertical não vale em elemento
   inline, então os 16px simplesmente não existiam; e 16px sozinhos ainda
   deixariam 7px sob a barra, contra 16px dos outros números da régua. Bloco
   mais 24px acomodam o glifo mais baixo, e não só o mais comum — mesma decisão
   já tomada em `.hero-stat-label`. */
.stat-title{display:block;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-primary);margin:var(--space-3) 0 0}
.stat-note{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:1.55;margin:6px 0 0;max-width:26ch;text-wrap:pretty}

/* Cobertura — trilhos de marcas. O cabeçalho acompanha a coluna do texto; o
   trilho sangra até a borda da tela, porque uma frota que passa não tem fim
   visível. */
.brand-rails{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-7)}
.rail-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.rail-label{font-family:var(--font-mono);font-size:var(--fs-label-sm);font-weight:var(--fw-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.rail-rule{flex:1;min-width:24px;height:1px;background:var(--border)}
.rail-count{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.08em;color:var(--text-muted);white-space:nowrap}
.rail-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail-track{display:flex;align-items:center;width:max-content}
/* Altura fixa vale para um brasão; aplicada a um logotipo escrito de 6:1 ela
   entrega seis vezes mais mancha na tela. O teto de largura devolve o
   equilíbrio: a assinatura larga encolhe em altura, o brasão não se mexe. */
.brand-mark{flex:none;height:34px;width:auto;max-width:124px;object-fit:contain;margin-right:60px;user-select:none;
  /* Todo logo entra como silhueta branca: normaliza dezenas de paletas alheias
     num conjunto só, e nenhuma cartela branca precisa quebrar o fundo escuro. */
  filter:brightness(0) invert(1);opacity:.68}

/* Fecho da cobertura. A régua com o traço verde no canto é a mesma abertura de
   `.stat-cell` — aqui ela encerra os trilhos em vez de abrir uma medida, e o
   requisito elétrico é lido como número, não escondido dentro da ressalva. */
/* Fecho da cobertura. Uma faixa que atravessa a calha inteira: a medida na
   esquerda, a ressalva no meio e a ação ancorada na borda direita. A régua com
   o traço verde no canto é a mesma abertura de `.stat-cell` — aqui ela encerra
   os trilhos em vez de abrir uma medida, e o requisito elétrico é lido como
   número, não escondido dentro da ressalva. */
.coverage-spec{margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--border);position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3) var(--space-8);align-items:center}
.coverage-spec::before{content:'';position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--green-500)}
.spec-value{display:block;font-family:var(--font-display);font-size:clamp(2.25rem,3.2vw,2.75rem);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-display);line-height:.9;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec-unit{display:block;margin-top:10px;font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);line-height:1.5}
/* 56ch mantém a medida de leitura confortável mesmo com a coluna do meio
   ocupando toda a folga que sobra entre as duas pontas da faixa. */
.spec-body{margin:0;max-width:56ch;font-size:var(--fs-body);color:var(--text-secondary);line-height:1.7;text-wrap:balance}
.spec-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.spec-ask{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
/* Contorno, não preenchimento: o botão cheio já é do header e do WhatsApp
   flutuante, e esta é uma ação secundária. */
.spec-link{display:inline-flex;align-items:center;gap:12px;padding:13px 22px;border:1px solid rgba(76,204,17,.35);
  border-radius:var(--radius-pill);color:var(--green-400);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  white-space:nowrap}
.spec-link:hover{color:var(--green-400)}
.spec-link i{font-size:.8em}

/* Contato — um painel de linhas, não quatro cartões. O que a pessoa veio
   buscar (o número, o e-mail) é o texto mais forte da linha; o rótulo recua
   para o mono pequeno, como nos cabeçalhos dos trilhos. */
.contact-ledger{border:1px solid var(--border);border-radius:var(--radius-3xl);background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);overflow:hidden}
.ledger-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--space-2);padding:var(--space-3);color:inherit;text-decoration:none}
.ledger-row + .ledger-row{border-top:1px solid var(--border)}
/* O fio verde entra pela esquerda no hover — mesmo gesto do traço que marca o
   começo de cada célula de Números, agora como resposta ao ponteiro. */
.ledger-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green-500);
  transform:scaleY(0);transform-origin:50% 50%}
/* Cobre também o fio de separação, senão o traço verde para 1px antes do topo. */
.ledger-row + .ledger-row::before{top:-1px}
.ledger-icon{width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  background:rgba(76,204,17,.1);border:1px solid rgba(76,204,17,.18);color:var(--green-500);font-size:1.05rem}
.ledger-label{display:block;font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.ledger-value{display:block;margin-top:5px;font-size:1.05rem;font-weight:var(--fw-semibold);color:var(--text-primary);
  line-height:1.3;overflow-wrap:anywhere}
/* Acima de 1180px o e-mail cabe inteiro no mesmo corpo dos telefones (277px
   dos 307px da coluna) e as quatro linhas ficam com a mesma altura — que é o
   que faz o conjunto ler como instrumento e não como lista. Abaixo disso ele
   encolhe o suficiente para continuar numa linha só. */
@media (max-width:1180px){.ledger-row[data-longo] .ledger-value{font-size:.95rem}}
.ledger-go{color:var(--text-muted);font-size:.8rem}
.ledger-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-label-sm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-400);white-space:nowrap}
.ledger-live i{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 8px var(--green-500)}

.contact-form-panel{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius-3xl);
  padding:var(--space-5);backdrop-filter:blur(10px)}
.form-head{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.form-head h3{font-family:var(--font-display);font-size:1.75rem;font-weight:var(--fw-extrabold);text-transform:uppercase;
  letter-spacing:var(--ls-display);line-height:1;color:var(--text-primary);margin:0}
.form-head p{margin:10px 0 0;font-size:var(--fs-body-sm);color:var(--text-secondary)}

/* Fora da tela, e não `display:none`: campo escondido com display some do
   formulário para o robô também, e aí o laço deixa de funcionar. */
.form-gato{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-erro{
  display:flex;align-items:flex-start;gap:10px;margin:0;
  padding:12px 14px;border-radius:var(--radius-md);
  background:rgba(255,86,86,.08);border:1px solid rgba(255,86,86,.32);
  color:#ffb4b4;font-size:var(--fs-body-sm);line-height:1.5;
}
.form-erro i{margin-top:2px;color:#ff7a7a}

/* A confirmação toma o lugar dos campos: enquanto ela estiver na tela não há
   formulário para enviar de novo por engano. */
.form-ok{display:flex;align-items:flex-start;gap:16px;padding:8px 0 4px}
.form-ok > i{font-size:1.6rem;color:var(--green-500);margin-top:2px}
.form-ok strong{display:block;font-size:1.15rem;color:var(--text-primary)}
.form-ok p{margin:8px 0 18px;color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.6}

/* ---------- contato: chegar ao primeiro campo sem rolar ---------- */

/* Como seção dentro de outra página o respiro cheio continua; em /contato/,
   onde ela é a página inteira, 100px de topo somados ao rótulo, ao título e à
   linha de apoio jogavam o primeiro campo abaixo da dobra. */
.contato-secao{padding:100px 0}
.contato-secao.is-pagina{padding:56px 0 88px}
.contato-lead{margin:0 0 48px}
.contato-secao.is-pagina .contato-lead{margin-bottom:36px}

/* Header */
.header-inner{max-width:1400px;margin:0 auto;padding:0 40px;height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-nav{display:flex;align-items:center;gap:32px}
.header-actions{display:flex;align-items:center;gap:12px}
.header-burger{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;padding:8px}
.header-mobile-panel{display:none}

@media (max-width:1024px){
  .wrap,.header-inner{padding:0 24px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{gap:48px}
  .grid-footer{grid-template-columns:1fr 1fr}

  .header-nav,.header-actions{display:none}
  .header-burger{display:inline-flex;align-items:center;justify-content:center}
  .header-mobile-panel.is-open{display:flex;flex-direction:column;gap:4px;padding:16px 24px 24px;background:rgba(6,30,39,.98);border-bottom:1px solid var(--border)}
  .header-mobile-panel .header-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .header-mobile-panel .header-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:12px}
}

@media (max-width:1024px){
  /* Em 1024px a coluna da esquerda cai para ~314px e o e-mail deixa de caber
     numa linha só, o que desalinha a altura das quatro linhas do painel. Uma
     coluna só devolve a folga — e o formulário, que já é uma grade de dois
     campos, não perde nada com a largura inteira. */
  .grid-contato{grid-template-columns:1fr}

  /* Empilhado, o painel de telefone/e-mail vinha primeiro e empurrava o
     formulário para baixo de quatro linhas: quem chegou para pedir orçamento
     rolava a tela inteira antes de ver um campo. O formulário é o trabalho
     desta página, então ele assume o topo; o painel continua logo abaixo,
     inteiro, para quem prefere ligar ou chamar no WhatsApp. */
  .contact-form-col{order:-1}

  /* A faixa perde a terceira coluna antes de espremer a frase: a medida e a
     ressalva dividem a primeira linha, a ação assume a segunda inteira e
     continua ancorada à direita. */
  .coverage-spec{grid-template-columns:auto minmax(0,1fr);gap:var(--space-3) var(--space-6);align-items:start}
  .spec-cta{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--space-2)}

  /* Em largura total as quatro linhas viram uma tabela esticada, com a seta a
     um palmo do valor. Duas colunas devolvem a proximidade — é a mesma dobra
     que `.stat-row` faz nesta faixa, então os dois painéis do site continuam
     se comportando igual. */
  .contact-ledger{display:grid;grid-template-columns:1fr 1fr}
  .ledger-row + .ledger-row{border-top:0}
  .ledger-row:nth-child(even){border-left:1px solid var(--border)}
  .ledger-row:nth-child(n+3){border-top:1px solid var(--border)}
  .ledger-row + .ledger-row::before{top:0}
  .ledger-row:nth-child(n+3)::before{top:-1px}
}

@media (max-width:768px){
  .wrap,.header-inner{padding:0 20px}
  .contato-secao.is-pagina{padding:32px 0 64px}
  .contato-secao.is-pagina .contato-lead{margin-bottom:28px}
  .grid-2,.grid-3,.grid-contato,.grid-footer,.grid-form{grid-template-columns:1fr}
  .hero-stats{gap:28px}

  /* Empilhado, a ação volta a alinhar à esquerda com o resto do texto — um
     botão sozinho na borda direita de um celular não ancora coisa nenhuma. */
  .coverage-spec{grid-template-columns:1fr;gap:var(--space-3)}
  .spec-value{font-size:2.25rem}
  /* Volta a empilhar: em linha, a pergunta se espremia em duas linhas ao lado
     do botão. (O bloco de 1024px acima põe `row`; aqui ele é desfeito.) */
  .spec-cta{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}

  /* Volta à pilha: em 390px duas colunas não cabem sem espremer o valor. */
  .contact-ledger{display:block}
  .ledger-row:nth-child(even){border-left:0}
  .ledger-row:nth-child(n+3){border-top:0}
  .ledger-row + .ledger-row{border-top:1px solid var(--border)}
  .ledger-row + .ledger-row::before,.ledger-row:nth-child(n+3)::before{top:-1px}

  .ledger-row{padding:var(--space-3) var(--space-2);gap:14px}
  .ledger-icon{width:42px;height:42px}
  /* Sobram 227px para o texto num aparelho de 390px: .85rem é o corpo em que
     o endereço ainda entra numa linha só. Abaixo disso ele quebra — mas o
     <wbr> garante que a quebra caia no @, não no meio do domínio. */
  .ledger-row[data-longo] .ledger-value{font-size:.85rem}
  /* "Central 24h" ao lado de "Todo o Brasil" estoura a linha no celular: o
     estado desce para baixo do valor, sem perder o ponto pulsante. */
  .ledger-live{grid-column:2;grid-row:2;margin-top:8px}
  .contact-form-panel{padding:var(--space-3)}
  .form-head h3{font-size:1.5rem}
}

/* Os trilhos e o painel de números mantêm a mesma leitura no celular: o que
   muda é a direção dos fios — de colunas para linhas — e não a quantidade de
   informação. */
@media (max-width:1024px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-cell:nth-child(odd){--pl:0px;border-left:0}
  /* Empilhado, cada célula ganha o próprio fio no topo — e o traço verde
     continua ancorado em `top:-1px`, ou seja, sobre esse fio. */
  .stat-cell:nth-child(n+3){margin-top:var(--space-4);border-top:1px solid var(--border)}
}

@media (max-width:768px){
  .stat-row{grid-template-columns:1fr}
  .stat-cell{--pl:0px;border-left:0}
  .stat-cell + .stat-cell{margin-top:var(--space-4);border-top:1px solid var(--border)}
  .stat-note{max-width:none}
  .brand-rails{gap:var(--space-6)}
  .brand-mark{height:28px;max-width:102px;margin-right:44px}
  .rail-head{flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
  .rail-label{white-space:normal}
}