/* ==========================================================================
   INNOVAR — sistema de design

   Tudo aqui sai do logo (ver docs/IDENTIDADE.md). Nada de framework: um cartão
   que anima não vale 300 kB, e o público abre este site no celular, em obra,
   com a rede que a obra tem.
   ========================================================================== */

:root {
  /* --- cores tiradas do logo --------------------------------------------- */
  --marinho: #241B63;
  --marinho-2: #1A1449;          /* topo do gradiente do rodapé */
  --laranja: #F0561F;
  --laranja-escuro: #C2410C;     /* o laranja legível em texto pequeno */
  --ambar: #F89A1C;

  --branco: #FFFFFF;
  --gelo: #F6F7FB;
  --grafite: #1B1F2E;
  --cinza: #5C6478;
  --linha: #E2E6EF;

  /* O ÂNGULO DA MARCA. 115° é o das barras do NN — não 90°, não 45°. É o que
     faz o gradiente parecer feito para este logo, e não um laranja qualquer. */
  --marca: linear-gradient(115deg, var(--ambar), var(--laranja));

  /* --- tipografia fluida, sem breakpoint para tamanho de letra ----------- */
  --f-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-corpo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --t-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  --t-h3: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-corpo: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-peq: .875rem;
  --t-mini: .75rem;

  /* --- espaço numa escala de 4px ---------------------------------------- */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;   --e5: 1.5rem;
  --e6: 2rem;   --e7: 3rem;   --e8: 4rem;   --e9: 5rem;   --e10: 6rem;

  /* --- forma ------------------------------------------------------------ */
  --r: 10px; --r-sm: 6px; --r-lg: 16px;
  /* Sombra curta e opaca, em duas camadas. Sombra larga e difusa é linguagem
     de rede social; catálogo técnico pede aresta. */
  --sombra: 0 1px 2px rgba(27,31,46,.06), 0 8px 24px -12px rgba(27,31,46,.18);
  --sombra-alta: 0 2px 4px rgba(27,31,46,.08), 0 18px 40px -18px rgba(36,27,99,.34);

  --container: min(1200px, 100% - 2.5rem);
  --leitura: 68ch;

  /* --- movimento -------------------------------------------------------- */
  --curva: cubic-bezier(.2,.8,.3,1);
  --t-micro: 140ms;
  --t-bloco: 420ms;
  --t-rota: 260ms;
}

/* ==========================================================================
   MOVIMENTO DESLIGADO PARA QUEM PEDIU

   Não é acessibilidade decorativa: quem tem enxaqueca vestibular passa mal com
   deslocamento na tela. Aqui a animação some inteira — o conteúdo aparece,
   simplesmente. Fica ANTES de tudo para nenhuma regra posterior reintroduzir
   movimento sem passar por aqui.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revela] { opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------- reinício ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font: 400 var(--t-corpo)/1.65 var(--f-corpo);
  color: var(--grafite);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  /* A barra de rolagem não muda a largura do conteúdo ao aparecer: sem isto,
     abrir um menu longo desloca a página inteira alguns pixels para o lado. */
  scrollbar-gutter: stable;
}
img, picture, svg, video { display: block; max-width: 100%; }
/* PROPORÇÃO DECLARADA é obrigação, não estilo: sem ela a página pula quando a
   foto chega, e o dedo que já estava indo acerta o botão errado. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Foco visível SEMPRE. Remover o anel de foco quebra a navegação por teclado,
   que é como se usa um formulário longo — e como leitores de tela navegam. */
:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- layout -- */
.container { width: var(--container); margin-inline: auto; }
.secao { padding-block: clamp(var(--e7), 5vw, var(--e10)); }
.secao--gelo { background: var(--gelo); }
.secao--marinho { background: var(--marinho); color: var(--branco); }

.pilha > * + * { margin-top: var(--e4); }
.grade { display: grid; gap: var(--e5); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ----------------------------------------------------------- tipografia -- */
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { max-width: var(--leitura); }
.dim { color: var(--cinza); }
.num { font-variant-numeric: tabular-nums; }

/* O olho da seção: rótulo pequeno em caixa alta com o traço da marca. Repete o
   ângulo do logo — é o que amarra a página à identidade sem repetir o logo. */
.olho {
  display: inline-flex; align-items: center; gap: var(--e2);
  font: 700 var(--t-mini)/1 var(--f-corpo);
  letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-escuro);
  margin-bottom: var(--e3);
}
.olho::before {
  content: ""; width: 26px; height: 10px; border-radius: 2px;
  background: var(--marca);
  /* o mesmo corte a 115° das barras do NN */
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}
.secao--marinho .olho { color: var(--ambar); }

/* -------------------------------------------------------------- botões --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: .82rem 1.5rem; border-radius: var(--r); border: 2px solid transparent;
  font: 600 1rem/1 var(--f-corpo); cursor: pointer; text-decoration: none;
  transition: transform var(--t-micro) var(--curva),
              box-shadow var(--t-micro) var(--curva),
              background var(--t-micro) var(--curva),
              border-color var(--t-micro) var(--curva);
  /* Só `transform` e `opacity` animam. Animar largura ou margem força
     recálculo de layout a cada quadro e engasga no celular de obra. */
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primario { background: var(--marca); color: var(--branco); box-shadow: var(--sombra); }
.btn--primario:hover { box-shadow: var(--sombra-alta); }
.btn--marinho { background: var(--marinho); color: var(--branco); }
.btn--contorno { border-color: var(--linha); background: var(--branco); color: var(--marinho); }
.btn--contorno:hover { border-color: var(--laranja); }
.secao--marinho .btn--contorno { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.35); }
.btn--peq { padding: .55rem 1rem; font-size: var(--t-peq); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* BOTÃO QUE ESTÁ TRABALHANDO. Sem isto, o duplo clique num formulário lento
   vira dois orçamentos — e a pessoa não sabe se o primeiro foi. */
.btn[aria-busy="true"] { pointer-events: none; position: relative; color: transparent; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--branco);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- cartões --- */
.card {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--e5);
  transition: transform var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva),
              border-color var(--t-micro) var(--curva);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: transparent; }

/* O canto cortado a 115°: aparece só no cartão em destaque, para ser sinal e
   não textura. */
.card--marca { position: relative; overflow: hidden; }
.card--marca::before {
  content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 8px;
  background: var(--marca); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}

/* ==========================================================================
   OS QUATRO ESTADOS

   Todo bloco que espera dado tem carregando · vazio · erro · pronto. Três não
   bastam: sem o de ERRO, uma falha de rede vira tela vazia — e vazio se lê
   como "não existe nada", não como "não carregou".
   ========================================================================== */

/* SKELETON — a forma do que vem, não um retângulo genérico. Só entra acima de
   200 ms (o JS cuida disso): abaixo disso ele pisca, e piscar parece defeito. */
.esqueleto { position: relative; overflow: hidden; background: var(--linha); border-radius: var(--r-sm); }
.esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%);
  animation: brilho 1.25s infinite;
}
@keyframes brilho { to { transform: translateX(100%); } }
.esqueleto--linha { height: 1em; margin-block: .35em; }
.esqueleto--titulo { height: 1.6em; width: 60%; }
.esqueleto--foto { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r); }

.vazio, .erro { padding: var(--e6) var(--e4); text-align: center; color: var(--cinza); }
.erro { color: var(--laranja-escuro); }
.erro .btn { margin-top: var(--e3); }

/* BARRA DE PROGRESSO no topo — toda navegação e todo envio. Ela responde à
   pergunta "travou ou está indo?", que é a que faz alguém clicar de novo. */
.progresso {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  background: var(--marca); z-index: 9999;
  transition: width 200ms ease-out, opacity 300ms 200ms;
}
.progresso[hidden] { display: block !important; opacity: 0; }

/* ENTRADA DE BLOCO. `data-revela` começa deslocado e o observador acende.

   O SELETOR COMEÇA EM `.js` DE PROPÓSITO, e essa é a parte que importa: quem
   apaga o bloco é o CSS, mas quem o acende é o JavaScript. Se a regra valesse
   sempre, bastaria o script não carregar — rede da obra, extensão, erro numa
   linha acima — para metade da página ficar invisível PARA SEMPRE, sem nada na
   tela indicando que existe conteúdo ali. Já vi virar "o site não tem
   serviços".

   A classe `.js` é posta por um script embutido no `<head>`, antes do CSS
   pintar. Sem JS ela nunca aparece, a regra não casa, e a página abre inteira.
   O enfeite depende do script; o conteúdo, não. */
.js [data-revela] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-bloco) var(--curva), transform var(--t-bloco) var(--curva);
}
.js [data-revela].visivel { opacity: 1; transform: none; }
/* O atraso em cascata dá ritmo à entrada de uma grade sem parecer sequência de
   apresentação de slides. Teto de 6: acima disso a última demora demais. */
[data-revela][style*="--i"] { transition-delay: calc(var(--i) * 70ms); }

/* -------------------------------------------------------------- etiqueta -- */
.tag {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: .22rem .6rem; border-radius: 999px;
  font: 600 var(--t-mini)/1.4 var(--f-corpo); letter-spacing: .02em;
  background: var(--gelo); color: var(--cinza); border: 1px solid var(--linha);
}
.tag--estoque { background: #E9F7EF; color: #14683B; border-color: #C3E9D4; }
.tag--sem { background: #FDECEC; color: #A3261F; border-color: #F5C9C6; }

/* ------------------------------------------------------------ utilidades -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Pular para o conteúdo: primeiro elemento focável da página. Quem navega por
   teclado não deve percorrer o menu inteiro em toda página. */
.pular {
  position: absolute; left: var(--e4); top: -100px; z-index: 100;
  background: var(--marinho); color: var(--branco);
  padding: var(--e3) var(--e4); border-radius: var(--r);
  transition: top var(--t-micro) var(--curva);
}
.pular:focus { top: var(--e4); }