/* Páginas de serviço — protótipo local (código: Claude). Mesma identidade da home aprovada: cores, tipografia,
   cabeçalho (logo + selo BSI 57 / 42 até 640 / 38 px até 380, width:auto), botões, contato e rodapé copiados de
   index.html. A home não usa este arquivo (o CSS dela continua embutido e intacto). */
:root{
  --verde:#4a7726; --verde-hover:#3e6520; --verde-vivo:#80c14d; --verde-foco:#639b37; --verde-fundo:#354b23; --verde-noite:#2d3e1f; --verde-rodape:#26341b; --verde-claro:#ecf5e5;   /* V29: escala da cor dominante da logo (#80C14D, matiz 94°); contrastes AA em entregas/refinamento-v29.txt */
  --tinta:#16201a; --texto:#2d372f; --suave:#5d685f; --linha:#e1e6df; --cinza:#f4f6f2;
  --fonte:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--texto);font:16px/1.6 var(--fonte)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--verde-foco);outline-offset:2px}
/* foco sobre fundos escuros: verde da logo (>= 3:1 nesses fundos); nos claros vale o --verde-foco */
.faixa :focus-visible,.contato :focus-visible,footer :focus-visible{outline-color:var(--verde-vivo)}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{color:var(--tinta);font-weight:600;letter-spacing:-.015em;line-height:1.18}
.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.pular{position:absolute;left:-9999px}.pular:focus{left:16px;top:8px;background:#fff;padding:8px 12px;z-index:60}

/* botões e links (iguais aos da home) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:6px;border:1px solid transparent;font-weight:600;font-size:16px;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-hover)}
.btn-branco{background:#fff;color:var(--verde-fundo)}
.btn-branco:hover{background:var(--verde-claro)}
.btn-contorno{background:#fff;color:var(--verde-fundo);border-color:#c9d3c6}
.btn-contorno:hover{border-color:var(--verde);color:var(--verde)}
.seta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--verde);text-decoration:none}
.seta::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.seta:hover::after{transform:translate(3px,0) rotate(45deg)}

/* cabeçalho (igual ao da home) */
header{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30}
.cabecalho{display:flex;align-items:center;gap:24px;height:99px}
.logo{flex:none}
.logo img{width:210px}
.selo-bsi{flex:none;display:block;padding-left:18px;border-left:1px solid var(--linha)}
.selo-bsi img{box-sizing:content-box;height:57px;width:auto;padding:5px;background:#fff}
nav.principal{display:flex;gap:32px;margin-left:auto}
nav.principal a{text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
nav.principal a:hover{color:var(--verde);border-bottom-color:var(--verde)}
.cabecalho .btn{flex:none;min-height:44px;padding:10px 20px;font-size:15px}

/* abertura: trilha, etapa, título, resumo e ações */
.abertura{background:var(--cinza);border-bottom:1px solid var(--linha);padding:32px 0 40px}
.trilha ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--suave)}
.trilha li + li::before{content:"/";margin-right:8px;color:#a9b4ab}
.trilha a{color:var(--verde);text-decoration:none}
.trilha a:hover{text-decoration:underline}
.etapa{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde)}
.abertura h1{margin-top:4px;font-size:40px}
.resumo{margin-top:12px;max-width:760px;font-size:18px;color:var(--suave)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* cadeia: as 6 etapas com links; a atual em destaque */
.cadeia{border-bottom:1px solid var(--linha)}
.fluxo{list-style:none;padding:16px 0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:etapa}
.fluxo li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--verde-fundo);counter-increment:etapa}
.fluxo li::after{content:counter(etapa);order:-1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--verde-claro);color:var(--verde-fundo);font-size:12px}
.fluxo li + li::before{content:"";order:-2;width:18px;height:1px;background:var(--verde)}
.fluxo li.atual::after{background:var(--verde);color:#fff}
.fluxo a{color:var(--suave);font-weight:500;text-decoration:none}
.fluxo a:hover{color:var(--verde);text-decoration:underline}
.fluxo a[aria-current="page"]{color:var(--verde-fundo);font-weight:700}

/* conteúdo: texto à esquerda, fotos aprovadas à direita (páginas sem foto: uma coluna) */
.servico{padding:56px 0 72px}
.grade-servico{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.grade-servico.sem-midia{grid-template-columns:minmax(0,780px)}
.blocos{display:grid;gap:36px}
.bloco h2{font-size:22px}
.bloco p{margin-top:8px}
.bloco ul{margin-top:10px;padding-left:20px}
.bloco ul li + li{margin-top:6px}
.bloco .seta{margin-top:12px}
.bloco p a,.passos a{color:var(--verde);font-weight:600}
.bloco .lista-links{list-style:none;padding:0;display:grid;gap:6px}
.lista-links a{color:var(--verde);font-weight:600;text-decoration:none}
.lista-links a:hover{text-decoration:underline}
.fontes{font-size:12px;color:var(--suave)}
.fontes a{color:inherit}
/* páginas de unidade: papel e endereço copiados da home */
.bloco .papel{color:var(--suave)}
.bloco address{margin-top:6px;font-style:normal}
/* Política Ambiental (/sustentabilidade): texto integral do site antigo, apresentação da V29 */
.politica p + p{margin-top:12px}
.bloco .lista-marcada{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.lista-marcada li{position:relative;padding-left:26px}
.lista-marcada li::before{content:"";position:absolute;left:3px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--verde)}
.compromissos{list-style:none;padding:0;margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:comp}
.compromissos li{counter-increment:comp;padding:18px 20px 20px;border-radius:12px;background:var(--cinza);border-top:3px solid var(--verde)}
.compromissos li::before{content:counter(comp,decimal-leading-zero);display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--verde)}
.compromissos strong{display:block;margin-bottom:4px;font-size:17px;font-weight:600;color:var(--tinta)}
.bloco .destaque{margin-top:18px;padding:14px 18px;border-left:3px solid var(--verde);border-radius:0 8px 8px 0;background:var(--verde-claro);color:var(--verde-fundo)}
.bloco h3{margin-top:22px;font-size:18px}
.passos{list-style:none;padding:0;margin-top:14px;counter-reset:passo;display:grid;gap:12px}
.passos li{position:relative;padding-left:40px;counter-increment:passo}
.passos li::before{content:counter(passo);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--verde-claro);color:var(--verde-fundo);font-size:13px;font-weight:700}
.midia{display:grid;gap:16px;position:sticky;top:124px}
.grade-fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cartao-foto{margin:0;border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff}
.quadro{padding:18px 20px 12px;background:linear-gradient(180deg,#ffffff 0%,#f7f9f6 58%,#eef2ec 100%)}
.quadro img{width:100%;height:200px;max-width:none;object-fit:contain;object-position:50% 100%}
.grade-fotos .quadro{padding:14px 14px 10px}
.grade-fotos .quadro img{height:120px}
.cartao-foto.foto img{width:100%;height:auto;aspect-ratio:16/10;max-width:none;object-fit:cover}
.cartao-foto figcaption{padding:10px 16px 12px;border-top:1px solid var(--linha);font-size:14px;font-weight:600;color:var(--verde-fundo)}
.cartao-foto figcaption small{display:block;font-size:12px;font-weight:400;color:var(--suave)}
.nota{display:block;font-size:12px;color:var(--suave)}
.nota a{color:var(--verde)}

/* próximo passo (mesmo bloco de contato da home) */
.contato{background:var(--verde-noite);color:#d3dbcc;padding:64px 0}
.contato .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.contato h2{color:#fff;font-size:30px}
.contato p{margin-top:6px;font-size:17px}
.canais{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px}
.canais a:not(.btn){color:#fff;font-weight:600}

/* rodapé (igual ao da home, com a lista de serviços) */
footer{background:var(--verde-rodape);color:#b6c1ae;font-size:14px;padding:44px 0 30px}
.rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.rodape img{width:170px}
.rodape ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape h3{color:#fff;font-size:14px}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}

/* páginas Serviços e Contato: seções, cartões; setores e faixa iguais aos da home; unidades com endereço visível */
.secao{padding:56px 0 64px}
.secao + .secao{padding-top:0}
.titulo-bloco{font-size:26px;margin-bottom:20px}
.resumo-bloco{margin:-8px 0 20px;color:var(--suave)}
.cartoes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cartao{display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;border-radius:12px;background:var(--cinza);border-top:3px solid var(--verde)}
.cartao .num{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde)}
.cartao h3{font-size:20px}
.cartao h3 a{text-decoration:none}
.cartao h3 a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-top:2px solid var(--verde);border-right:2px solid var(--verde);transform:rotate(45deg);vertical-align:2px}
.cartao h3 a:hover{color:var(--verde)}
.cartao p{color:var(--suave);flex:1}
.cartao .btn{align-self:flex-start;margin-top:8px}
.nota-canais{margin-top:20px;font-size:15px}
.nota-canais a{color:var(--verde);font-weight:600}
.setores{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.setor{display:flex;flex-direction:column;padding:28px 26px 26px;border-radius:12px;background:var(--cinza);border-top:3px solid var(--verde)}
.setor h3{font-size:22px}
.setor p{margin-top:8px;color:var(--suave);flex:1}
.setor .seta{margin-top:20px}
.faixa{background:var(--verde-fundo);color:#dae2d4}
.faixa ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.faixa li{padding:30px 28px;display:flex;flex-direction:column;gap:2px}
.faixa li + li{border-left:1px solid rgba(255,255,255,.12)}
.faixa li:first-child{padding-left:0}
.faixa strong{color:#fff;font-size:17px;font-weight:600}
.faixa a{color:#fff;font-weight:600;font-size:14px;margin-top:6px}
.faixa + .secao{padding-top:56px}
.unidades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.unidade{display:flex;flex-direction:column;border:1px solid var(--linha);border-radius:12px;padding:22px 20px 18px}
.uf{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:var(--verde-claro);color:var(--verde-fundo);font-weight:700;font-size:18px;letter-spacing:.04em;margin-bottom:16px}
.unidade.matriz .uf{background:var(--verde);color:#fff}
.unidade h3{font-size:18px}
.unidade .papel{margin-top:4px;font-size:14px;color:var(--suave)}
.unidade address{flex:1;margin-top:12px;font-style:normal;font-size:14px}
.unidade a{margin-top:10px;color:var(--verde);font-weight:600;font-size:14px}

/* WhatsApp flutuante (igual ao da home) */
.whatsapp-flutuante{position:fixed;right:24px;bottom:24px;z-index:50;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.24);transition:transform .15s}
.whatsapp-flutuante:hover{transform:scale(1.06)}
.whatsapp-flutuante svg{width:32px;height:32px;fill:#fff}

@media (max-width:1180px){
  .cabecalho{gap:18px}
  nav.principal{gap:22px}
  .unidades{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* menu com 5 itens (Sustentabilidade): cabeçalho em uma linha até 981 px só com espaçamento menor (altura igual) */
@media (min-width:981px) and (max-width:1100px){
  .cabecalho{gap:12px}
  nav.principal{gap:12px}
}
@media (max-width:980px){
  html{scroll-padding-top:16px}
  header{position:static}
  .cabecalho{flex-wrap:wrap;height:auto;padding:16px 0 10px;row-gap:10px}
  nav.principal{order:3;width:100%;margin-left:0;gap:24px}
  .cabecalho .btn{margin-left:auto}
  .grade-servico,.grade-servico.sem-midia{grid-template-columns:minmax(0,1fr);gap:40px}
  .midia{position:static;max-width:620px}
  .fluxo{display:grid;grid-template-columns:repeat(3,max-content);column-gap:28px;row-gap:10px}
  .fluxo li + li::before{display:none}
  .cartoes,.setores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faixa ul{grid-template-columns:1fr}
  .faixa li,.faixa li:first-child{padding:22px 0}
  .faixa li + li{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 36px)}
  .logo img{width:156px}
  .selo-bsi{padding-left:12px}
  .selo-bsi img{height:42px;width:auto;padding:4px}
  .cabecalho .btn{display:none}
  nav.principal{justify-content:space-between;gap:8px;flex-wrap:wrap;row-gap:2px}   /* 5 itens numa linha a partir de 384 px; quebra só se não couber (ex.: 320 px) */
  nav.principal a{font-size:14px}
  .abertura{padding:22px 0 28px}
  .abertura h1{font-size:30px}
  .resumo{font-size:17px}
  .acoes .btn{width:100%}
  .fluxo{grid-template-columns:1fr 1fr;gap:10px}
  .servico{padding:40px 0 56px}
  .blocos{gap:30px}
  .grade-fotos{gap:10px}
  .grade-fotos .quadro{padding:10px 8px 6px}
  .grade-fotos .quadro img{height:84px}
  .quadro img{height:170px}
  .secao{padding:40px 0 48px}
  .faixa + .secao{padding-top:40px}
  .titulo-bloco{font-size:24px}
  .cartoes,.setores,.unidades,.compromissos{grid-template-columns:minmax(0,1fr)}
  .cartao .btn{align-self:stretch}
  .contato{padding:48px 0}
  .contato h2{font-size:26px}
  .contato .btn{width:100%}
  .whatsapp-flutuante{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px}
}
@media (max-width:380px){
  nav.principal{gap:6px}   /* 5 itens numa linha em 360 e 375 px */
  nav.principal a{font-size:13px}
  .logo img{width:140px}
  .selo-bsi img{height:38px;width:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
