/* ============================================================================
   TECNOVOLT — Fundação do design system
   Paleta extraída da logomarca: placa preta, letras em ouro, moldura em aço.
   ========================================================================= */

/* ------------------------------------------------------------- tipografia */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin.92895abae7c5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.288d2a1c9f04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.65850a373e25.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.01ba6c2a184b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* marca */
  --ouro: #c9a227;
  --ouro-claro: #e8ce84;
  --ouro-brilho: #f4e3ae;
  --ouro-escuro: #8a6d18;
  --preto: #0b0b0d;
  --grafite: #16171a;
  --grafite-claro: #22242a;
  --aco: #8e959c;
  --aco-claro: #d5d9dd;
  --aco-borda: #e4e7ea;
  --creme: #f7f4ed;
  --creme-escuro: #efeade;
  --branco: #ffffff;

  /* semânticos */
  --sucesso: #1c7a4d;
  --sucesso-fundo: #e8f5ee;
  --perigo: #c1121f;
  --perigo-fundo: #fdecec;
  --alerta: #b26a00;
  --alerta-fundo: #fdf3e2;
  --info: #1f4e79;
  --info-fundo: #e9f1f8;

  /* texto */
  --texto: #17181b;
  --texto-suave: #5c6068;
  --texto-fraco: #8b9098;
  --texto-claro: #f2f3f5;

  /* superfícies */
  --fundo: #ffffff;
  --superficie: #ffffff;
  --superficie-alt: #f8f9fa;
  --borda: #e4e7ea;
  --borda-forte: #cfd4d9;

  /* espaçamento (escala 4px) */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;

  /* raios e sombras */
  --raio-p: 4px;
  --raio: 8px;
  --raio-g: 14px;
  --sombra-p: 0 1px 2px rgba(11, 11, 13, 0.06), 0 1px 3px rgba(11, 11, 13, 0.04);
  --sombra: 0 4px 16px rgba(11, 11, 13, 0.07), 0 1px 3px rgba(11, 11, 13, 0.05);
  --sombra-g: 0 18px 44px rgba(11, 11, 13, 0.14);
  --sombra-ouro: 0 10px 30px rgba(201, 162, 39, 0.28);

  /* tipografia */
  --fonte-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* movimento */
  --transicao: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transicao-lenta: 420ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --largura: 1200px;
  --cabecalho-altura: 84px;
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho-altura) + 1rem);
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e3);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texto);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ouro-escuro);
  text-decoration: none;
  transition: color var(--transicao);
}
a:hover { color: var(--ouro); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--e4); padding-left: 1.25rem; }

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--e6) 0;
}

table { border-collapse: collapse; width: 100%; }

button { font-family: inherit; }

/* foco visível e consistente — acessibilidade */
:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}
:focus:not(:focus-visible) { outline: none; }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--e3) var(--e5);
  background: var(--preto);
  color: var(--ouro);
  font-weight: 600;
  border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus {
  left: 0;
}

/* leitores de tela */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ layout */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e5);
}
.container-estreito { max-width: 820px; }

.secao { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.secao-compacta { padding-block: clamp(2.5rem, 5vw, 4rem); }

.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(300px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.flex { display: flex; gap: var(--e4); }
.flex-centro { align-items: center; }
.flex-entre { justify-content: space-between; }
.flex-quebra { flex-wrap: wrap; }

/* -------------------------------------------------------------- utilidades */
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); }
.texto-ouro { color: var(--ouro-escuro); }
.texto-sucesso { color: var(--sucesso); }
.texto-perigo { color: var(--perigo); }
.texto-alerta { color: var(--alerta); }
.texto-pequeno { font-size: 0.875rem; }
.texto-menor { font-size: 0.8125rem; }
.negrito { font-weight: 600; }
.mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.numero { font-variant-numeric: tabular-nums; }
.sem-quebra { white-space: nowrap; }
.largura-total { width: 100%; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--e2); }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--e2); }
.mb-3 { margin-bottom: var(--e3); }
.mb-4 { margin-bottom: var(--e4); }
.mb-5 { margin-bottom: var(--e5); }
.mb-6 { margin-bottom: var(--e6); }

/* ------------------------------------------------- elementos da identidade */
/* Textura de aço escovado — assinatura visual tirada da moldura da logo. */
.aco-escovado {
  background-color: var(--grafite);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.028) 0px,
      rgba(255, 255, 255, 0.028) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(160deg, #2a2d33 0%, #131417 45%, #1e2126 70%, #0e0f11 100%);
}

/* Filete dourado com brilho central, como o contorno da placa. */
.filete-ouro {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--ouro-escuro) 0%,
    var(--ouro) 22%,
    var(--ouro-brilho) 50%,
    var(--ouro) 78%,
    var(--ouro-escuro) 100%
  );
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
  margin-bottom: var(--e3);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--ouro);
}
.eyebrow-claro { color: var(--ouro-claro); }

.titulo-secao { margin-bottom: var(--e3); }
.subtitulo-secao {
  color: var(--texto-suave);
  font-size: 1.0625rem;
  max-width: 62ch;
}
.cabecalho-secao { margin-bottom: var(--e7); }
.cabecalho-secao.texto-centro .subtitulo-secao { margin-inline: auto; }
.cabecalho-secao.texto-centro .eyebrow::before { display: none; }

/* ----------------------------------------------------------------- botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background-color var(--transicao), color var(--transicao),
    border-color var(--transicao);
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(0); }

.btn-primario {
  background: linear-gradient(135deg, var(--ouro-claro) 0%, var(--ouro) 46%, var(--ouro-escuro) 100%);
  color: #201803;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.32);
}
.btn-primario:hover { color: #201803; box-shadow: var(--sombra-ouro); }

.btn-escuro {
  background: var(--preto);
  color: var(--branco);
}
.btn-escuro:hover { background: var(--grafite-claro); color: var(--ouro-claro); }

.btn-contorno {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--texto);
}
.btn-contorno:hover { border-color: var(--ouro); color: var(--ouro-escuro); background: rgba(201, 162, 39, 0.06); }

.btn-contorno-claro {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 206, 132, 0.45);
  color: var(--ouro-claro);
  backdrop-filter: blur(4px);
}
.btn-contorno-claro:hover {
  background: rgba(201, 162, 39, 0.14);
  border-color: var(--ouro);
  color: var(--ouro-brilho);
}

.btn-whatsapp { background: #25d366; color: #06301a; }
.btn-whatsapp:hover { background: #1fbb59; color: #06301a; }

.btn-perigo { background: var(--perigo); color: #fff; }
.btn-perigo:hover { background: #a20e19; color: #fff; }

.btn-sucesso { background: var(--sucesso); color: #fff; }
.btn-sucesso:hover { background: #166139; color: #fff; }

.btn-neutro { background: var(--superficie-alt); border-color: var(--borda); color: var(--texto); }
.btn-neutro:hover { background: var(--branco); border-color: var(--borda-forte); }

.btn-g { padding: 1rem 2rem; font-size: 1.0625rem; }
.btn-p { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.btn-bloco { width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ouro-escuro);
}
.btn-link svg { transition: transform var(--transicao); }
.btn-link:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- cartões */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e5);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}
.cartao-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: rgba(201, 162, 39, 0.4);
}

/* Cartão com filete superior que cresce no hover. */
.cartao-filete { position: relative; overflow: hidden; }
.cartao-filete::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 44px;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transition: width var(--transicao-lenta);
}
.cartao-filete:hover::before { width: 100%; }

.cartao-escuro {
  background: var(--grafite);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--texto-claro);
}
.cartao-escuro h3, .cartao-escuro h4 { color: var(--branco); }

/* --------------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.etiqueta-neutra { background: var(--superficie-alt); color: var(--texto-suave); border: 1px solid var(--borda); }
.etiqueta-ouro { background: rgba(201, 162, 39, 0.14); color: var(--ouro-escuro); }
.etiqueta-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta-info { background: var(--info-fundo); color: var(--info); }
.etiqueta-ponto::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------- alertas */
.alerta {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e4) var(--e5);
  border-radius: var(--raio);
  border-left: 4px solid;
  margin-bottom: var(--e4);
  font-size: 0.9375rem;
}
.alerta svg { flex-shrink: 0; margin-top: 2px; }
.alerta-sucesso { background: var(--sucesso-fundo); border-color: var(--sucesso); color: #10502f; }
.alerta-erro { background: var(--perigo-fundo); border-color: var(--perigo); color: #8c0d17; }
.alerta-alerta { background: var(--alerta-fundo); border-color: var(--alerta); color: #7a4900; }
.alerta-info { background: var(--info-fundo); border-color: var(--info); color: #163a59; }

/* --------------------------------------------------------------- formulários */
.campo { margin-bottom: var(--e4); }

.rotulo {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
}
.rotulo .obrigatorio { color: var(--perigo); margin-left: 2px; }

.entrada,
.selecao,
.area-texto {
  width: 100%;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--branco);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.entrada::placeholder, .area-texto::placeholder { color: var(--texto-fraco); }
.entrada:focus,
.selecao:focus,
.area-texto:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.entrada:disabled, .selecao:disabled, .area-texto:disabled {
  background: var(--superficie-alt);
  color: var(--texto-fraco);
  cursor: not-allowed;
}
.area-texto { min-height: 130px; resize: vertical; }

.selecao {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6068' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}

.entrada-erro { border-color: var(--perigo) !important; }
.mensagem-erro {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--perigo);
  font-weight: 500;
}
.dica-campo {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--texto-fraco);
}

.caixa-selecao {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.caixa-selecao input[type='checkbox'],
.caixa-selecao input[type='radio'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ouro);
  cursor: pointer;
  flex-shrink: 0;
}

.grupo-campos {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

fieldset {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e5);
  margin: 0 0 var(--e5);
}
legend {
  padding-inline: var(--e2);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------- tabelas */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
  width: 100%;
  font-size: 0.9375rem;
}
.tabela th {
  padding: 0.75rem var(--e3);
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borda);
  white-space: nowrap;
  background: var(--superficie-alt);
}
.tabela td {
  padding: 0.8125rem var(--e3);
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tbody tr { transition: background-color 120ms ease; }
.tabela tbody tr:hover { background: var(--superficie-alt); }
.tabela tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--borda-forte);
  border-bottom: none;
  background: var(--superficie-alt);
}
.tabela .col-numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .col-acoes { text-align: right; white-space: nowrap; width: 1%; }

.tabela-vazia {
  padding: var(--e8) var(--e5);
  text-align: center;
  color: var(--texto-fraco);
}
.tabela-vazia svg { margin: 0 auto var(--e4); opacity: 0.35; }

/* ------------------------------------------------------------- animações */
/* O conteúdo é visível por padrão. Só a versão com JS ativo esconde para
   animar na entrada — assim, sem JavaScript (ou se ele falhar), nada some. */
.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.js .revelar.visivel { opacity: 1; transform: none; }
.revelar-atraso-1 { transition-delay: 90ms; }
.revelar-atraso-2 { transition-delay: 180ms; }
.revelar-atraso-3 { transition-delay: 270ms; }
.revelar-atraso-4 { transition-delay: 360ms; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.carregando {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--ouro);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}
.carregando-claro { border-color: rgba(255, 255, 255, 0.25); border-top-color: var(--ouro-claro); }

/* Quem prefere menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .revelar { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- impressão */
@media print {
  .sem-impressao, .cabecalho-site, .rodape-site, .botao-whatsapp,
  .barra-cookies, .barra-lateral, .topo-painel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cartao { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .secao { padding-block: 1rem; }
}