/* PRUMO — mescla × painel (12/09/2026).
   Pedido dele: "os elementos visuais do painel estão muito legais... a fonte da
   painel parece mais voltada para tecnologia, será que a gente não pode usar ela
   PONTUALMENTE e manter a base da Jakarta do mescla?"

   Então a divisão é por VOZ, não por gosto:
     · Jakarta  = a voz da casa   -> titulo e texto corrido, tudo que se lê
     · Grotesk  = a voz da maquina -> numero, rotulo de secao, medida, unidade

   A roupa é a da MESCLA, sem tirar nada: fundo do espresso, blocos do café,
   dourado-mel, movimento lento e o fio de luz na quina de cima. O que vem do
   PAINEL é ESTRUTURA: a faixa de números com tendência, o medidor no topo do
   bloco e a seção numerada.
   Prumo é instrumento de aprumar parede: mede sem fazer barulho. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../midia/jakarta-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../midia/grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --poco: #0C0908;        /* espresso: poço, faixa, rodapé */
  --fundo: #100C0A;       /* espresso: o fundo da página   */
  --faixa: #171210;       /* espresso: seção alternada     */
  --sup: #322822;         /* café: cartão, formulário      */
  --elevada: #42352C;     /* café: hover, campo            */
  --borda: #4A3D34;
  --borda-campo: #998876;
  --apoio: #C4B5A8;
  --texto: #F5F0EA;

  --acento: #E0B96F;      /* dourado-mel, o do espresso */
  --acento-2: #D9B26A;    /* dourado café               */
  --creme: #EADFC6;

  --raio: 12px;
  --max: 1100px;
  --lento: .35s cubic-bezier(.22, .61, .36, 1);

  --fs-display: clamp(2.2rem, 4.8vw, 3.4rem);
  --fs-numero: clamp(2.4rem, 5.4vw, 3.6rem);
  --fs-h2: clamp(1.4rem, 2.4vw, 1.85rem);
  --fs-corpo: 1.0625rem;
  --fs-nota: .8125rem;

  --casa: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maquina: "Space Grotesk", ui-monospace, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--casa);
  font-size: var(--fs-corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--casa); line-height: 1.16; margin: 0 0 .6rem;
  letter-spacing: -.022em; font-weight: 700; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 1rem; }
a { color: var(--acento); }

.envoltorio { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.apoio { color: var(--apoio); }
.nota { font-size: var(--fs-nota); color: var(--apoio); }
/* A VOZ DA MÁQUINA: só número, rótulo e unidade. Nunca frase. */
.maq { font-family: var(--maquina); font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; }

/* ------------------------------------------------------------------ nav -- */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(16, 12, 10, .9);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--borda); }
.nav__caixa { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; gap: .3rem .8rem; padding: .5rem clamp(1.1rem, 4vw, 2rem); }
.nav a, .nav__eu { font-family: var(--maquina); font-size: var(--fs-nota);
  text-decoration: none; color: var(--apoio); padding: .28rem .55rem;
  border-radius: 7px; transition: color var(--lento), background var(--lento); }
.nav a i, .nav__eu i { font-style: normal; opacity: .5; }
.nav a:hover { color: var(--texto); background: var(--sup); }
.nav__eu { color: var(--fundo); background: var(--acento); font-weight: 600; }
.nav__eu i { opacity: .75; }
.nav__marca { margin-right: auto; display: flex; align-items: center; }
.nav__marca img { height: 18px; width: auto; }

/* ------------------------------------------------ a HASTE, agora numerada -- */
/* O SERENO abre seção com uma haste de 3px na cor de acento; o PAINEL abre com
   número e fio. Aqui os dois viram UM elemento só: haste + número na voz da
   máquina + fio até a borda. */
.rotulo { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
  font-family: var(--maquina); font-size: var(--fs-nota); letter-spacing: .14em;
  text-transform: uppercase; color: var(--apoio); }
.rotulo::before { content: ""; width: 3px; height: 1.35rem; flex: none;
  background: var(--acento); border-radius: 2px; }
.rotulo b { color: var(--acento); font-weight: 500; }
.rotulo::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borda), transparent); }

/* ----------------------------------------------------------------- hero -- */
.hero { padding: clamp(3rem, 9vh, 5rem) 0 1.8rem; }
.hero__sub { font-size: 1.1rem; color: var(--apoio); max-width: 52ch; }

/* A FAIXA DE NÚMEROS do PAINEL, vestida de mescla: fundo do poço, blocos do
   café, tendência em dourado. */
.medidas { display: grid; gap: 1px; background: var(--borda);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin: 2rem 0 0; }
.medida { background: var(--sup); padding: 1.1rem 1.2rem 1rem; position: relative; }
/* o fio de luz do SERENO, mantido: é ele que separa "escuro" de "escuro caro" */
.medida::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: rgba(255, 255, 255, .07); }
.medida__rotulo { display: block; font-family: var(--maquina); font-size: var(--fs-nota);
  letter-spacing: .08em; text-transform: uppercase; color: var(--apoio); margin-bottom: .45rem; }
.medida__valor { display: block; font-family: var(--maquina);
  font-variant-numeric: tabular-nums; font-size: var(--fs-numero); font-weight: 700;
  line-height: 1; color: var(--creme); }
.medida--alta .medida__valor { color: var(--acento); }
.medida__nota { display: block; font-size: var(--fs-nota); color: var(--apoio); margin-top: .5rem; }
.faisca { display: block; width: 100%; height: 26px; margin-top: .55rem; }

.botoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.botao { display: inline-flex; align-items: center; gap: .45rem; font: inherit;
  font-weight: 600; font-size: .9375rem; padding: .68rem 1.3rem; border-radius: 9px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--lento), background var(--lento), border-color var(--lento); }
.botao--principal { background: var(--acento); color: #241905; }
.botao--principal:hover { background: var(--creme); transform: translateY(-2px); }
.botao--linha { background: transparent; color: var(--texto); border-color: var(--borda); }
.botao--linha:hover { border-color: var(--borda-campo); background: var(--sup); transform: translateY(-2px); }

/* --------------------------------------------------------------- seções -- */
.secao { padding: clamp(2.4rem, 6.5vh, 3.8rem) 0; }
.secao--alt { background: var(--faixa); }
.secao__topo { max-width: 60ch; margin-bottom: 1.6rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* O BLOCO: fio de luz do SERENO em cima E, quando tem valor, o medidor do
   PAINEL por cima dele. Os dois convivem: o fio é branco a 7% e atravessa o
   bloco inteiro; o medidor é dourado e mede 2px. */
.bloco { position: relative; background: var(--sup); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.35rem 1.4rem; overflow: hidden;
  transition: transform var(--lento), background var(--lento), border-color var(--lento); }
.bloco::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: rgba(255, 255, 255, .07); }
.bloco--medido::after { content: ""; position: absolute; top: 0; left: 0; height: 2px;
  width: var(--cheio, 40%); background: var(--acento); transition: width .45s ease; }
.bloco:hover { transform: translateY(-2px); background: var(--elevada);
  border-color: var(--borda-campo); }
.bloco--medido:hover::after { width: 100%; }

.amostra { display: flex; align-items: center; gap: .85rem; }
.pastilha { width: 42px; height: 42px; border-radius: 8px; flex: none; border: 1px solid var(--borda); }
.hex { font-family: var(--maquina); font-variant-numeric: tabular-nums;
  font-size: var(--fs-nota); color: var(--apoio); }

/* --------------------------------------------------------------- campos -- */
.campo { display: block; margin-bottom: .9rem; }
.campo span { display: block; font-family: var(--maquina); font-size: var(--fs-nota);
  letter-spacing: .06em; text-transform: uppercase; color: var(--apoio); margin-bottom: .32rem; }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: .9375rem;
  color: var(--texto); background: var(--elevada); border: 1px solid var(--borda-campo);
  border-radius: 9px; padding: .66rem .8rem; transition: border-color var(--lento), box-shadow var(--lento); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none;
  border-color: var(--acento); box-shadow: 0 0 0 3px rgba(224, 185, 111, .22); }
.selo { display: inline-block; font-family: var(--maquina); font-size: .72rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 5px; color: var(--acento);
  background: rgba(224, 185, 111, .12); border: 1px solid rgba(224, 185, 111, .3); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .58rem .7rem; border-bottom: 1px solid var(--borda); }
th { font-family: var(--maquina); font-size: var(--fs-nota); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--apoio); }
td b { font-family: var(--maquina); font-variant-numeric: tabular-nums; color: var(--creme); }

.poco { background: var(--poco); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.rodape { padding: 2.2rem 0 3rem; color: var(--apoio); font-size: var(--fs-nota); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
}