/* ==========================================================================
   GINT. Folha de estilo única, compartilhada por todas as páginas.
   Extraída da landing do toxicológico (referencia/landing-toxicologico.html),
   que já está na marca e já foi validada. Aqui ela virou base reutilizável.

   Ordem dos blocos:
     1. Tokens        6. Cartões de serviço (novo)
     2. Base          7. Prova social / Local / FAQ
     3. Tipografia    8. CTA final / Rodapé / Barra mobile
     4. Layout        9. Responsivo
     5. Componentes
   ========================================================================== */


/* 1. TOKENS ============================================================== */

:root{
  --preto:#0E0E0E;
  --grafite:#3A3A3A;
  --cinza:#6B6B6B;
  --cinza-suave:#9A9A9A;
  --linha:#E6E6E6;
  --fundo:#FAFAFA;
  --branco:#FFFFFF;
  --amarelo:#FFD400;
  --amarelo-escuro:#EBC400;
  --fonte:"Inter",system-ui,-apple-system,sans-serif;
  --max:1080px;
}


/* 2. BASE =============================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte);
  color:var(--preto);
  background:var(--branco);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:80px;              /* espaço da barra fixa no celular */
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}


/* 3. TIPOGRAFIA ========================================================= */

h1{font-size:clamp(2.1rem,5.4vw,3.5rem);font-weight:700;line-height:1.12;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:700;line-height:1.2;letter-spacing:-.018em}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-.008em}

.eyebrow{
  font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--cinza-suave);margin-bottom:14px;
}
.lead{font-size:1.15rem;color:var(--grafite);max-width:44ch}

/* Barra amarela tipo marca-texto atrás de um trecho do título */
.marcado{font-weight:700;position:relative;white-space:nowrap}
.marcado::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;
  height:.34em;background:var(--amarelo);z-index:-1;
}

/* Marcador de informação pendente. Amarelo e feio de propósito:
   é para ser impossível publicar sem ver. Some quando o dado chegar. */
.confirmar{
  display:inline-block;background:var(--amarelo);color:var(--preto);
  font-size:.78rem;font-weight:600;padding:2px 8px;border-radius:4px;
  border:1px dashed var(--preto);
}


/* 4. LAYOUT ============================================================= */

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.secao{padding:68px 0}
.secao-fundo{background:var(--fundo);border-block:1px solid var(--linha)}
.secao h2{margin-bottom:38px;max-width:20ch}
.secao h2.solta{margin-bottom:18px}


/* 5. COMPONENTES ======================================================== */

/* Topo ------------------------------------------------------------------ */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);padding:15px 0;
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* min-height garante os 24px de alvo de toque do WCAG 2.2 */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:32px}
.losango{width:15px;height:15px;background:var(--amarelo);transform:rotate(45deg);flex:0 0 auto}
.marca-txt strong{font-size:1.22rem;font-weight:700;letter-spacing:.02em;display:block;line-height:1.1}
/* Some em telas estreitas: o nome por extenso quebrava em duas linhas
   e deixava o topo alto demais no celular. */
.marca-txt small{display:none;font-size:.63rem;letter-spacing:.05em;color:var(--cinza-suave)}
@media(min-width:420px){.marca-txt small{display:block;white-space:nowrap}}
.topo-tel{
  font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:32px;
}

/* Menu: escondido no celular (lá o rodapé e a barra fixa dão conta) */
.menu{display:none;gap:26px;list-style:none}
.menu a{font-size:.92rem;font-weight:500;text-decoration:none;color:var(--grafite);padding:4px 0}
.menu a:hover{color:var(--preto);box-shadow:inset 0 -2px 0 var(--amarelo)}
.menu a[aria-current="page"]{color:var(--preto);box-shadow:inset 0 -2px 0 var(--amarelo)}

/* Botão ----------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:600;letter-spacing:-.006em;text-decoration:none;
  padding:15px 30px;border:none;border-radius:8px;cursor:pointer;
  transition:background .16s ease,transform .16s ease;
}
.btn-zap{background:var(--amarelo);color:var(--preto)}
.btn-zap:hover{background:var(--amarelo-escuro);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--preto);outline-offset:3px}
.btn-bloco{width:100%;max-width:330px}

/* Hero ------------------------------------------------------------------ */
.hero{padding:72px 0 68px;border-bottom:1px solid var(--linha)}
.hero h1{margin-bottom:20px;max-width:17ch}
.hero .lead{margin-bottom:32px}
.selos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.selos li{
  font-size:.83rem;font-weight:500;color:var(--grafite);
  padding:6px 13px;border:1px solid var(--linha);border-radius:100px;
}

/* Passos numerados ------------------------------------------------------ */
.passos{list-style:none;display:grid;gap:34px}
.passo-n{
  font-size:.8rem;font-weight:600;color:var(--cinza-suave);
  padding-bottom:11px;margin-bottom:13px;border-bottom:2px solid var(--amarelo);
  display:inline-block;min-width:34px;
}
.passo h3{margin-bottom:5px}
.passo p{color:var(--cinza);font-size:.96rem}

/* Lista com losango ----------------------------------------------------- */
.perfis{list-style:none;display:grid;gap:0;margin-bottom:34px;border-top:1px solid var(--linha)}
.perfil{
  padding:17px 4px;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:13px;font-weight:500;
}
.perfil::before{
  content:"";flex:0 0 auto;width:8px;height:8px;
  background:var(--amarelo);transform:rotate(45deg);
}
.fecha{font-size:1.05rem;color:var(--grafite);margin-bottom:24px;max-width:42ch}


/* 6. CARTÕES DE SERVIÇO (novo, a landing era página única) =============== */

.servicos{list-style:none;display:grid;gap:14px;margin-bottom:36px}
.servico{
  display:block;text-decoration:none;
  border:1px solid var(--linha);border-radius:10px;padding:24px 22px;
  background:var(--branco);
  transition:border-color .16s ease,transform .16s ease;
}
.servico:hover{border-color:var(--preto);transform:translateY(-2px)}
.servico:focus-visible{outline:2px solid var(--preto);outline-offset:3px}
.servico h3{margin-bottom:6px}
.servico p{color:var(--cinza);font-size:.94rem;margin-bottom:12px}
.servico .seta{font-size:.88rem;font-weight:600;color:var(--preto)}
.servico .seta::after{content:" →"}
.servico-tag{
  display:inline-block;background:var(--amarelo);color:var(--preto);
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  padding:3px 9px;border-radius:100px;margin-bottom:11px;
}


/* 7. PROVA SOCIAL / LOCAL / FAQ ========================================= */

.prova{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.prova .nota{font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.prova .nota span{color:var(--amarelo)}
.prova p{color:var(--cinza);max-width:30ch}
.prova a{font-weight:600;color:var(--preto)}

.local-info{display:grid;gap:28px;margin-bottom:34px}
.local-item .rot{
  font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--cinza-suave);margin-bottom:6px;
}
.local-item p{font-size:1rem;color:var(--grafite)}
.mapa-link{
  display:inline-flex;align-items:center;min-height:28px;
  margin-top:8px;font-size:.92rem;font-weight:600;color:var(--preto);
}

details{border-bottom:1px solid var(--linha)}
details summary{
  font-size:1.02rem;font-weight:600;padding:19px 0;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--cinza-suave);font-weight:400;font-size:1.3rem;line-height:1.2}
details[open] summary::after{content:"–"}
details p{padding-bottom:19px;color:var(--cinza);font-size:.96rem;max-width:60ch}
details p + p{padding-top:0;margin-top:-8px}


/* 8. CTA FINAL / RODAPÉ / BARRA MOBILE ================================== */

.cta-final{background:var(--preto);color:var(--branco);padding:72px 0;text-align:center}
.cta-final h2{color:var(--branco);margin:0 auto 14px;max-width:16ch}
.cta-final p{color:#B4B4B4;margin-bottom:30px}

.rodape{background:var(--preto);color:#7E7E7E;font-size:.83rem;padding:0 0 40px;border-top:1px solid #262626}
.rodape .wrap{padding-top:32px}
.rodape p{margin-bottom:7px}
.rodape a{color:#B4B4B4}
.aviso{color:#9A9A9A;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #262626;max-width:62ch}

.rodape-mapa{
  list-style:none;display:grid;gap:2px;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #262626;
}
/* Alvo de toque: o WCAG 2.2 (criterio 2.5.8) pede no minimo 24x24px.
   Antes estes links tinham 17px de altura e o dedo errava no celular. */
.rodape-mapa a{
  text-decoration:none;font-size:.88rem;
  display:flex;align-items:center;min-height:32px;
}
.rodape-mapa a:hover{color:var(--amarelo)}
.rodape-legal a{display:inline-flex;align-items:center;min-height:24px}
.prova a{display:inline-flex;align-items:center;min-height:24px}
.rodape-legal{padding-top:18px;margin-top:18px;border-top:1px solid #262626}

.barra{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--branco);border-top:1px solid var(--linha);
  padding:11px 16px;box-shadow:0 -2px 20px rgba(0,0,0,.09);
}
.barra .btn{width:100%}


/* 9. RESPONSIVO ========================================================= */

@media(min-width:760px){
  .hero{padding:104px 0 92px}
  .secao{padding:88px 0}
  .menu{display:flex}
  .passos{grid-template-columns:repeat(3,1fr);gap:44px}
  .perfis{grid-template-columns:repeat(2,1fr);column-gap:36px}
  .servicos{grid-template-columns:repeat(2,1fr);gap:16px}
  .local-info{grid-template-columns:repeat(3,1fr)}
  .rodape-mapa{grid-template-columns:repeat(3,1fr)}
  body{padding-bottom:0}
  .barra{display:none}
}
@media(min-width:1000px){
  .servicos{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* 10. IMAGENS =========================================================== */

/* Foto da fachada. width/height no HTML evitam o texto "pular" quando a
   imagem carrega (isso e o CLS, uma das Core Web Vitals que o Google mede). */
.foto{
  border-radius:10px;overflow:hidden;border:1px solid var(--linha);
  background:var(--fundo);
}
.foto img{width:100%;height:auto;display:block}

/* No hero a foto entra ao lado do texto no computador e abaixo no celular */
.hero-com-foto .wrap{display:grid;gap:32px;align-items:center}
.hero-com-foto .foto{margin-bottom:4px}

/* Legenda discreta: diz o que a pessoa esta vendo, ajuda quem usa leitor
   de tela e reforca que o endereco e real */
.legenda{
  font-size:.82rem;color:var(--cinza);margin-top:10px;display:block;
}

@media(min-width:860px){
  .hero-com-foto .wrap{grid-template-columns:1.05fr .95fr;gap:44px}
  .hero-com-foto .hero-txt{order:1}
  .hero-com-foto .hero-img{order:2}
}


/* 11. AVISO DE NÃO VÍNCULO COM O GOVERNO ================================ */

/* Fica no topo de TODAS as páginas, acima do cabeçalho, e não pode ser
   fechado. A política do Google sobre documentos e serviços governamentais
   trata despachante como intermediário, e a suspensão da conta foi por
   "práticas comerciais inaceitáveis: phishing", cuja definição inclui dar a
   entender vínculo com entidade governamental. Um aviso só no rodapé, a 70%
   da rolagem, é prova fraca. Aqui ele é a primeira coisa da página. */
.aviso-gov{
  background:var(--preto);color:#E8E8E8;
  font-size:.82rem;line-height:1.5;
  padding:10px 0;
  border-bottom:2px solid var(--amarelo);
}
.aviso-gov .wrap{display:flex;align-items:flex-start;gap:10px}
.aviso-gov .losango-aviso{
  flex:0 0 auto;width:8px;height:8px;margin-top:6px;
  background:var(--amarelo);transform:rotate(45deg);
}
.aviso-gov strong{color:var(--branco);font-weight:600}

/* O cabeçalho gruda no topo; o aviso rola junto com a página, então a
   pessoa vê o aviso ao chegar e o menu continua acessível depois. */