/* ============================================================================
   IDENTIDADE "SINALIZAÇÃO" — Marco Inicial (a clínica e o posto de coleta)
   Escolhida em 20/09/2026 entre três propostas (ver docs/07-identidade.md).

   O vocabulário é o do próprio setor: âmbar de advertência, grafite, faixa
   zebrada, placa, pictograma. É a língua de quem compra — RH de indústria,
   transportadora, construção — e a única das três que se reconhece de longe.

   Gramática herdada da casa (MaraFlow / loja / ERP): tokens em CSS var com
   nome em português, display só nos títulos e Inter no corpo, cor com papel
   definido e contraste anotado, cor chapada sem gradiente.

   Regras que nasceram da revisão de marketing — não afrouxar:
   · CAIXA-ALTA só em h1 e h2. Em h3, corpo e botão de texto longo ela cansa.
   · ÂMBAR NUNCA É TEXTO SOBRE CLARO (2,1:1 no branco). Sobre claro ele é
     fundo, faixa ou marcador; o texto é sempre grafite.
   · O h1 usa vw no clamp: "FISCALIZAÇÃO." tem 13 letras e estourava em
     celular de 360px com o tamanho fixo da proposta.
   · O botão primário é o WhatsApp. Em serviço local no Brasil é por ali que
     o cliente fecha; "pedir proposta" é o secundário.
   ========================================================================== */

:root {
  --grafite:      #191A17;  /* texto, fundo escuro · 17:1 no branco */
  --grafite-2:    #2A2C27;
  --papel:        #FFFFFF;
  --cinza:        #F4F4F1;
  --borda:        #DDDED9;
  --texto-sec:    #5F625A;  /* 6,2:1 no branco */
  --texto-claro:  #BDBFB8;  /* secundário SOBRE grafite · 9:1 */

  --ambar:        #F2A900;  /* fundo de ação · grafite sobre ele dá 9,4:1 */
  --ambar-escuro: #D99400;  /* hover */
  --ambar-tint:   #FFF6DC;

  --ok:       #2E7D4F;      /* 5,1:1 no branco */
  --vencido:  #C2352B;      /* 5,4:1 no branco */

  --fonte-corpo:   "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-display: "Archivo", "Arial Black", "Inter", sans-serif;
  --traco: 2px;             /* espessura de moldura: tudo aqui é placa */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--grafite);
  font: 400 17px/1.65 var(--fonte-corpo); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

h1, h2 {
  font-family: var(--fonte-display); font-weight: 800; text-transform: uppercase;
  line-height: .98; letter-spacing: -.025em; margin: 0;
}
h1 { font-size: clamp(2.05rem, 9.2vw, 3.9rem); }  /* teto pensado em notebook 1366x768: o CTA tem de caber na primeira tela */
h2 { font-size: clamp(1.75rem, 5.2vw, 3.1rem); }
h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.12rem;
     line-height: 1.2; letter-spacing: -.01em; margin: 0; }
p  { margin: 0 0 1rem; }
a  { color: inherit; }

.wrap     { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.estreito { width: min(780px, 100% - 2.5rem); margin-inline: auto; }
.sec      { padding: 5.5rem 0; }
.sec-cinza { background: var(--cinza); border-block: 1px solid var(--borda); }
.escuro   { background: var(--grafite); color: #fff; }
.lead     { font-size: 1.14rem; color: var(--texto-sec); max-width: 58ch; margin-top: 1.3rem; }
.escuro .lead { color: var(--texto-claro); }
.sec-txt  { color: var(--texto-sec); }

/* Faixa zebrada — a assinatura. Só no topo e no fim da página: se aparecer
   em toda seção vira loja de EPI. */
.zebra { height: 12px; background: repeating-linear-gradient(135deg, var(--ambar) 0 18px, var(--grafite) 18px 36px); }

/* Chapéu: rótulo acima do título. Texto em grafite com marcador âmbar —
   âmbar como texto sobre branco não tem contraste. */
.chapeu {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem;
  font-family: var(--fonte-display); font-weight: 700; font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grafite); line-height: 1.35;
}
.chapeu::before { content: ""; width: 12px; height: 12px; background: var(--ambar); flex: none; }
.escuro .chapeu { color: var(--ambar); }
.escuro .chapeu::before { display: none; }
.sobre-ambar .chapeu::before { background: var(--grafite); }

/* ---------- topo ---------- */
.topo { background: var(--grafite); color: #fff; position: sticky; top: 0; z-index: 40; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.marca b { display: block; font-family: var(--fonte-display); font-weight: 800; font-size: 1.28rem;
           text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.marca small { display: block; font-size: .57rem; font-weight: 600; letter-spacing: .2em;
               text-transform: uppercase; color: var(--ambar); margin-top: .25rem; }
.nav { display: flex; align-items: center; gap: 1.6rem; font-size: .92rem; font-weight: 500; }
.nav a { color: #D5D6D0; text-decoration: none; }
.nav a:hover { color: #fff; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--fonte-display); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  padding: .9rem 1.6rem; text-decoration: none; cursor: pointer;
  border: var(--traco) solid transparent; background: none; color: inherit;
}
.btn svg { flex: none; }
.b1 { background: var(--ambar); color: var(--grafite) !important; border-color: var(--ambar); }
.b1:hover { background: var(--ambar-escuro); border-color: var(--ambar-escuro); }
.b2 { border-color: currentColor; }
.b2:hover { background: rgba(127,127,127,.12); }
.b-escuro { background: var(--grafite); color: var(--ambar) !important; border-color: var(--grafite); }
.btn-bloco { display: flex; width: 100%; }
.btn-p { padding: .6rem 1.1rem; font-size: .9rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---------- herói ---------- */
.hero { padding: 3.2rem 0 3.8rem; }
.hero .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.5rem; align-items: center; }
.hero h1 { max-width: 13ch; }
/* A oferta fica no herói, não enterrada na página. */
.ofertas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.6rem 0 0; }
.ofertas li { font-size: .86rem; font-weight: 600; color: #fff; border: 1px solid #4A4C45; padding: .32rem .75rem; }
.ofertas li::before { content: "✓ "; color: var(--ambar); }

/* FOTO NO HERÓI — padrão do IoT Data, onde "toda página tem imagem": a foto
   fica sob um degradê na cor escura da marca, que segura o contraste do texto.
   No celular o degradê é vertical (o texto ocupa a largura toda); no desktop é
   horizontal, sólido à esquerda e abrindo à direita, onde está o assunto. Se o
   assunto da foto cair à esquerda, espelhar com .espelhar em vez de trocar o
   degradê. Alfa em hex no fim da cor: B3=70% E6=90% EB=92% 8C=55% 33=20%. */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-foto { position: absolute; inset: 0; display: block; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-foto.espelhar img { transform: scaleX(-1); }
.hero-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #191A17B3 0%, #191A17E6 38%, #191A17 100%); }
@media (min-width: 901px) {
  .hero-foto::after { background: linear-gradient(90deg, #191A17 0%, #191A17EB 42%, #191A178C 72%, #191A1733 100%); }
}

/* Foto de seção: emoldurada como o resto do sistema (tudo aqui é placa). */
.foto { display: block; border: var(--traco) solid var(--grafite); background: var(--cinza); }
.foto img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sobre-ambar .foto { border-width: 4px; }

/* Cartões de foto das quatro frentes: o padrão da casa (degradê escuro embaixo,
   fio colorido à esquerda, rótulo), no sotaque desta identidade — canto vivo,
   fio âmbar e rótulo em Archivo. */
.fotos-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 3rem; }
.foto-card { position: relative; display: block; overflow: hidden; height: clamp(200px, 22vw, 300px); text-decoration: none; border: var(--traco) solid var(--grafite); background: var(--cinza); }
.foto-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.foto-card:hover img { transform: scale(1.05); }
.foto-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(25,26,23,0) 38%, rgba(25,26,23,.88) 100%); }
.foto-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2; background: var(--ambar); }
.foto-card span { position: absolute; z-index: 2; left: 18px; right: 12px; bottom: 14px; color: #fff; font: 800 1.05rem/1.12 var(--fonte-display); text-transform: uppercase; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .foto-card img { transition: none; } }

/* Placa de advertência */
.placa { background: var(--ambar); color: var(--grafite); padding: 1.8rem; border: 4px solid var(--grafite); outline: 2px solid var(--ambar); }
.placa-topo { display: flex; align-items: center; gap: .9rem; border-bottom: 3px solid var(--grafite); padding-bottom: 1rem; margin-bottom: .8rem; }
.placa-topo b { font-family: var(--fonte-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1.08; }
.placa ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; font-weight: 500; }
.placa li { display: flex; justify-content: space-between; gap: 1rem; padding: .58rem 0; border-bottom: 1px solid rgba(25,26,23,.28); }
.placa li:last-child { border-bottom: 0; }
.placa li b { font-weight: 700; white-space: nowrap; }
.placa-nota { font-size: .84rem; margin: .9rem 0 0; font-weight: 500; }

/* ---------- barra de prova ---------- */
.prova { border-bottom: var(--traco) solid var(--grafite); }
.prova .wrap { display: flex; flex-wrap: wrap; }
.prova-item { flex: 1 1 240px; padding: 1.3rem 1.4rem 1.3rem 0; font-size: .93rem; line-height: 1.45; display: flex; gap: .8rem; align-items: flex-start; }
.prova-item svg { flex: none; margin-top: .1rem; }
.prova-item b { display: block; font-family: var(--fonte-display); font-weight: 700; }

/* ---------- quem assina ---------- */
.assina { display: grid; grid-template-columns: 148px 1fr; gap: 2rem; align-items: center;
          border: var(--traco) solid var(--grafite); padding: 1.8rem; background: #fff; }
.assina img, .assina .avatar { width: 148px; height: 148px; object-fit: cover; border: var(--traco) solid var(--grafite); }
.assina .avatar { display: grid; place-items: center; background: var(--ambar);
                  font-family: var(--fonte-display); font-weight: 800; font-size: 3rem; }
.assina .cred { font-size: .9rem; color: var(--texto-sec); margin: .3rem 0 .9rem; }

/* ---------- grades ---------- */
.picts { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--traco) solid var(--grafite); margin-top: 3rem; background: #fff; }
.pict { padding: 1.9rem 1.5rem; border-right: var(--traco) solid var(--grafite); }
.pict:last-child { border-right: 0; }
.pict svg { margin-bottom: 1rem; }
.pict h3 { margin-bottom: .4rem; }
.pict p { font-size: .92rem; color: var(--texto-sec); margin: 0; }

.grade { display: grid; gap: 1rem; margin-top: 3rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--borda); border-top: 4px solid var(--grafite); padding: 1.5rem; }
.card h3 { margin-bottom: .45rem; }
.card p { margin: 0; font-size: .94rem; color: var(--texto-sec); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }

/* ---------- bloco âmbar ---------- */
.sobre-ambar { background: var(--ambar); color: var(--grafite); padding: 5rem 0; }
.sobre-ambar h2 { max-width: 19ch; }
.sobre-ambar p { font-size: 1.14rem; max-width: 54ch; margin-top: 1.4rem; }

/* ---------- tabela ---------- */
.tabela-rolagem { overflow-x: auto; margin-top: 2.5rem; border: var(--traco) solid var(--grafite); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { background: var(--grafite); color: #fff; font-family: var(--fonte-display); font-weight: 700; text-transform: uppercase;
     font-size: .72rem; letter-spacing: .1em; padding: .85rem 1.1rem; text-align: left; white-space: nowrap; }
td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--borda); }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }

/* ---------- passos (página do motorista) ---------- */
.passos { counter-reset: p; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: var(--traco) solid var(--grafite); margin-top: 2.5rem; background: #fff; }
.passo { counter-increment: p; padding: 1.6rem 1.4rem; border-right: var(--traco) solid var(--grafite); }
.passo:last-child { border-right: 0; }
.passo::before { content: counter(p); display: grid; place-items: center; width: 40px; height: 40px; background: var(--ambar);
                 font-family: var(--fonte-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; }
.passo p { margin: .35rem 0 0; font-size: .93rem; color: var(--texto-sec); }
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--traco) solid #4A4C45; margin-top: 2.2rem; }
.info div { padding: 1rem 1.2rem; border-right: var(--traco) solid #4A4C45; font-size: .93rem; color: var(--texto-claro); }
.info div:last-child { border-right: 0; }
.info b { display: block; color: #fff; font-family: var(--fonte-display); font-weight: 700; font-size: 1.02rem; }

/* ---------- FAQ ---------- */
details { border: 1px solid var(--borda); border-left: 4px solid var(--grafite); background: #fff; padding: 1.05rem 1.3rem; margin-bottom: .6rem; }
details[open] { border-left-color: var(--ambar); }
summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--fonte-display); font-weight: 800; font-size: 1.25rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: .85rem 0 0; color: var(--texto-sec); }

/* ---------- formulário ---------- */
.form { background: #fff; color: var(--grafite); border: 4px solid var(--ambar); padding: 1.7rem; }
.campo { margin-bottom: .95rem; }
.campo label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .32rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--grafite); background: #fff;
  padding: .7rem .85rem; border: var(--traco) solid var(--grafite); border-radius: 0;
}
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.nota { font-size: .82rem; line-height: 1.5; color: var(--texto-sec); }
.escuro .nota { color: var(--texto-claro); }
#form-status { text-align: center; min-height: 1.2rem; margin: .8rem 0 0; font-size: .88rem; font-weight: 500; }

.contato-dados { margin-top: 2.2rem; border-left: 4px solid var(--ambar); padding-left: 1.2rem; }
.contato-dados p { margin: 0 0 .7rem; font-size: .95rem; color: var(--texto-claro); }
.contato-dados b { color: #fff; display: block; font-family: var(--fonte-display); }

.rodape { background: var(--grafite); color: var(--texto-claro); font-size: .9rem; padding: 2.8rem 0; }
.rodape .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.rodape strong { color: #fff; font-family: var(--fonte-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.rodape p { margin: .35rem 0 0; }
.rodape a { color: var(--texto-claro); }

/* Botão flutuante de WhatsApp no celular: o CTA nunca sai da tela. */
.zap-fixo { display: none; }

/* Aviso de dados pendentes — só aparece em localhost. Ver lead.js. */
.aviso-dev { position: fixed; left: 12px; bottom: 12px; z-index: 99; max-width: 340px; background: #fff; color: var(--grafite);
             border: 3px solid var(--vencido); padding: .8rem 1rem; font-size: .8rem; line-height: 1.45; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.aviso-dev b { display: block; font-family: var(--fonte-display); margin-bottom: .2rem; }

.so-mobile { display: none; }
.mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mt3 { margin-top: 3rem; }

@media (max-width: 900px) {
  body { font-size: 16px; }
  .sec { padding: 3.4rem 0; }
  .hero { padding: 2.6rem 0 3rem; }
  .hero .wrap, .duas { grid-template-columns: 1fr; gap: 2.2rem; }
  .nav { display: none; }
  .so-mobile { display: inline-flex; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .picts, .passos, .fotos-4 { grid-template-columns: 1fr 1fr; }
  .pict, .passo { border-bottom: var(--traco) solid var(--grafite); }
  .pict:nth-child(2n), .passo:nth-child(2n) { border-right: 0; }
  .pict:nth-last-child(-n+2), .passo:nth-last-child(-n+2) { border-bottom: 0; }
  .info { grid-template-columns: 1fr; }
  .info div { border-right: 0; border-bottom: var(--traco) solid #4A4C45; }
  .info div:last-child { border-bottom: 0; }
  .assina { grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; }
  .sobre-ambar { padding: 3.4rem 0; }
  .acoes .btn { flex: 1 1 100%; }
  .zap-fixo { display: flex; position: fixed; right: 14px; bottom: 14px; z-index: 60; width: 56px; height: 56px;
              align-items: center; justify-content: center; background: var(--ambar); color: var(--grafite);
              border: 3px solid var(--grafite); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .rodape { padding-bottom: 5.5rem; }
}
@media (max-width: 480px) {
  /* o nome quebrava em duas linhas ao lado do botao do topo */
  .marca b { font-size: 1.06rem; white-space: nowrap; }
  .marca small { font-size: .5rem; letter-spacing: .14em; }
  .marca svg { width: 34px; height: 34px; }
  .foto-card { height: 150px; }
  .foto-card span { font-size: .88rem; left: 14px; bottom: 10px; }
  .picts, .passos { grid-template-columns: 1fr; }
  .pict, .passo { border-right: 0 !important; border-bottom: var(--traco) solid var(--grafite) !important; }
  .pict:last-child, .passo:last-child { border-bottom: 0 !important; }
}