:root{
  --laranja:#E98B15;
  --laranja-escuro:#C97310;
  --ocre:#D38A29;
  --vermelho:#C32329;
  --grafite:#2E2E2D;
  --grafite-medio:#555452;
  --linha:#E2DFDA;
  --fundo:#FFFFFF;
  --fundo-alt:#F6F4F1;
  --verde:#3ECF8E;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --largura:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--grafite);font-family:var(--sans);font-size:18.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--laranja-escuro)}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 24px}

/* cabeçalho */
.topo{padding:22px 0}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo img{width:200px}
.cta-topo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--laranja);font-weight:700;font-size:16px;letter-spacing:.02em;line-height:1.25;text-align:right}
.cta-topo:hover{color:var(--laranja-escuro)}
.cta-topo .icone{width:46px;height:46px;flex:0 0 46px;border-radius:8px;background:var(--laranja);display:grid;place-items:center}
.cta-topo .icone svg{width:26px;height:26px;fill:#fff}

/* nav */
.nav{background:var(--laranja);position:sticky;top:0;z-index:40}
.nav ul{max-width:var(--largura);margin:0 auto;padding:0 24px;list-style:none;display:flex;justify-content:center;flex-wrap:wrap}
.nav li+li{border-left:1px solid rgba(255,255,255,.45)}
.nav a{display:block;padding:14px 34px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.nav a:hover,.nav a[aria-current]{background:rgba(0,0,0,.12)}

/* hero */
.hero{position:relative;min-height:min(74vh,620px);display:grid;place-items:center;text-align:center;overflow:hidden;background:#111}
.hero-fundo{position:absolute;inset:0}
.hero-fundo img{width:100%;height:100%;object-fit:cover}
.hero-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.58))}
.hero-conteudo{position:relative;padding:70px 24px;color:#fff;max-width:900px}
/* marca do hero: gradiente unico, vermelho vivo -> laranja claro.
   Tons proprios desta peca, distintos dos do logo. */
.marca-bloco{display:inline-block;margin:0 0 34px;filter:drop-shadow(0 3px 22px rgba(0,0,0,.55))}
.hero-marca{
  font-size:clamp(3.8rem,12vw,8rem);font-weight:800;letter-spacing:-.035em;
  line-height:.92;margin:0;
  background-image:linear-gradient(90deg,#ED2F37 0%,#F9A854 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-marca{color:#ED2F37;background-image:none}
}
/* a assinatura acompanha exatamente a largura da palavra acima */
.hero-linha{
  font-size:clamp(.72rem,2.3vw,1.22rem);font-weight:700;text-transform:uppercase;
  margin:6px 0 0;color:#fff;white-space:nowrap;
  text-align:justify;text-align-last:justify;
  width:100%;
}
.hero-botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.botao{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:15px 30px;font-weight:700;font-size:16px;border:2px solid transparent}
.botao-verde{background:var(--verde);color:#0B3D2C}
.botao-verde:hover{filter:brightness(.94)}
.botao-claro{border-color:#fff;color:#fff}
.botao-claro:hover{background:#fff;color:var(--grafite)}
.botao-linha{border-color:var(--laranja);color:var(--laranja-escuro)}
.botao-linha:hover{background:var(--laranja);color:#fff}

/* seções */
.secao{padding:76px 0}
.secao-alt{background:var(--fundo-alt)}
.cabeca{text-align:center;margin-bottom:46px}
.cabeca h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
.subtitulo{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja);margin:0}
.regua{width:90px;height:5px;background:var(--laranja);margin:20px auto 0}
.texto-centro{max-width:40em;margin:0 auto;text-align:justify;hyphens:auto}
.texto-centro p{margin:0 0 18px}

/* árvore de produtos */
.arvore{display:grid;gap:0;justify-items:center}
.nivel{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.cartao{width:280px;background:#fff;border:3px solid var(--laranja);text-decoration:none;color:inherit;display:flex;flex-direction:column}
.cartao.escuro{border-color:#8E4B12}
.cartao-rotulo{padding:10px 14px 0;text-align:center}
.cartao-rotulo small{display:block;font-size:.8rem;color:var(--grafite-medio)}
.cartao-rotulo strong{display:block;font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.cartao-foto{padding:14px;flex:1;display:grid;place-items:center}
.cartao-pe{padding:0 14px 16px;text-align:center}
.cartao-pe span{display:inline-block;background:var(--laranja);color:#fff;font-weight:700;font-size:.92rem;padding:9px 22px}
.cartao:hover .cartao-pe span{background:var(--laranja-escuro)}
.conector{width:3px;height:40px;background:var(--laranja);opacity:.55}
.conector-larga{width:min(760px,80%);height:3px;background:var(--laranja);opacity:.55;position:relative}
.conector-larga::before,.conector-larga::after{content:"";position:absolute;top:0;width:3px;height:40px;background:var(--laranja);opacity:1}
.conector-larga::before{left:0}
.conector-larga::after{right:0}

/* grade de soluções */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:26px}
.item{background:#fff;border-top:4px solid var(--laranja);padding:22px;text-decoration:none;color:inherit;display:block}
.item h3{margin:0 0 6px;font-size:1.14rem;font-weight:700}
.item p{margin:0;font-size:1rem;color:var(--grafite-medio)}
.item:hover{box-shadow:0 8px 24px rgba(0,0,0,.09)}
/* "Demais soluções": 9 cartões em 3 colunas (3 linhas cheias) + a Rotuladora
   fechando num cartão largo de destaque, foto à esquerda e texto à direita,
   alinhado com a largura dos 3 de cima. */
.grade-solucoes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grade-solucoes .item{padding:0;border-top:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--linha);border-radius:6px;transition:box-shadow .2s ease,transform .2s ease}
.grade-solucoes .item:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-2px)}
.item-foto{aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:4px solid var(--laranja)}
.item-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.grade-solucoes .item:hover .item-foto img{transform:scale(1.04)}
.item-texto{padding:22px 24px 26px}
.grade-solucoes h3{font-size:1.28rem;margin:0 0 8px}
.grade-solucoes p{font-size:1.04rem;line-height:1.55}
/* cartão de destaque: mesma foto e mesma régua laranja dos irmãos, mas com
   borda laranja completa, fundo aquecido e selo sobre a foto */
.grade-solucoes .item-destaque{grid-column:1/-1;flex-direction:row;position:relative;
  border:2px solid var(--laranja);background:#FFF9F1;box-shadow:0 6px 22px rgba(233,139,21,.14)}
.grade-solucoes .item-destaque:hover{box-shadow:0 12px 30px rgba(233,139,21,.22)}
.item-destaque .item-foto{flex:0 0 calc((100% - 52px)/3);aspect-ratio:auto;border-bottom:0;border-right:4px solid var(--laranja)}
.item-destaque .item-texto{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 44px}
.item-destaque h3{font-size:1.8rem;margin:0 0 10px}
.item-destaque p{font-size:1.1rem;max-width:36em}
.item-tag{position:absolute;top:14px;left:14px;margin:0;background:var(--laranja);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:3px;line-height:1.4}
.item-link{display:inline-flex;align-items:center;margin-top:20px;padding:11px 22px;border:2px solid var(--laranja);
  border-radius:4px;font-weight:700;color:var(--laranja-escuro);align-self:flex-start;transition:background .2s,color .2s}
.grade-solucoes .item-destaque:hover .item-link{background:var(--laranja);color:#fff}
@media (max-width:1000px){.grade-solucoes{gap:18px}.item-texto{padding:18px 20px 22px}
  .item-destaque .item-texto{padding:22px 24px}.item-destaque h3{font-size:1.4rem}}
@media (max-width:640px){
  /* celular: uma coluna, cartões horizontais (foto à esquerda) — fecha sem órfão */
  .grade-solucoes{grid-template-columns:1fr;gap:12px}
  .grade-solucoes .item,.grade-solucoes .item-destaque{flex-direction:row;align-items:stretch}
  .item-foto,.item-destaque .item-foto{flex:0 0 38%;aspect-ratio:auto;border-bottom:0;border-right:4px solid var(--laranja)}
  .item-texto,.item-destaque .item-texto{padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
  .grade-solucoes h3{font-size:1.1rem}.grade-solucoes p{font-size:.95rem;line-height:1.45}
  .item-destaque h3{font-size:1.2rem}.item-destaque p{font-size:.95rem}.item-link{margin-top:10px}}

/* diferenciais */
/* diferenciais: colunas fixas para as linhas fecharem (3 = 6 itens em quem-somos;
   .difs-4 = 4 itens na home), 2 no tablet e 1 no celular */
.difs{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.difs-4{grid-template-columns:repeat(4,1fr);gap:36px 32px}
.dif{padding-top:22px;border-top:3px solid var(--ocre)}
.dif h3{margin:0 0 8px;font-size:1.14rem;font-weight:700}
.dif p{margin:0;color:var(--grafite-medio);font-size:1.02rem}
@media (max-width:900px){.difs,.difs-4{grid-template-columns:repeat(2,1fr);gap:30px 28px}}
@media (max-width:560px){.difs,.difs-4{grid-template-columns:1fr}}

/* depoimentos */
.depos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px}
.depo{background:#fff;padding:28px;border-left:5px solid var(--vermelho)}
.depo blockquote{margin:0 0 14px;font-size:1.04rem;line-height:1.6}
.depo cite{font-style:normal;font-weight:700;font-size:.92rem}
.depo cite small{display:block;font-weight:400;color:var(--grafite-medio)}

/* formulário */
.form-secao{background:var(--grafite);color:#fff;padding:76px 0}
.form-secao h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
.form-secao .subtitulo{color:var(--laranja)}
.form-secao p.intro{color:#D8D5D0;max-width:38em;margin:18px 0 34px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.88rem;font-weight:600;letter-spacing:.04em}
.campo input,.campo textarea,.campo select{font:inherit;font-size:16px;padding:13px 14px;border:2px solid #4A4644;background:#3A3634;color:#fff}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--laranja)}
.campo textarea{min-height:128px;resize:vertical}
.form .acao{grid-column:1/-1}

/* rodapé */
.rodape{background:#221F1E;color:#B9B5B0;font-size:1rem;padding:52px 0 26px}
.rodape .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:36px}
.rodape h4{color:#fff;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.rodape a{color:#B9B5B0;text-decoration:none}
.rodape a:hover{color:var(--laranja)}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:8px}
.rodape-logo img{width:150px;margin-bottom:14px}
.creditos{max-width:var(--largura);margin:36px auto 0;padding:20px 24px 0;border-top:1px solid #383431;font-size:.85rem;color:#8A8681}

/* flutuante */
.flutuante{position:fixed;right:18px;bottom:18px;z-index:50;display:inline-flex;align-items:center;gap:10px;background:var(--verde);color:#0B3D2C;text-decoration:none;padding:14px 22px;font-weight:700;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.flutuante svg{width:22px;height:22px;fill:#0B3D2C}

/* placeholder */
.ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,#F0EDE8,#F0EDE8 12px,#E8E4DE 12px,#E8E4DE 24px);color:#8A8681;font-size:.78rem;padding:16px;line-height:1.45;width:100%}

@media (max-width:900px){
  .secao{padding:52px 0}
  .nav a{padding:12px 17px;font-size:13.5px}
  .nav li+li{border-left:none}
  .topo .wrap{justify-content:center;text-align:center}
  .cta-topo{text-align:left}
  .form{grid-template-columns:1fr}
  .conector-larga{display:none}
  .conector{height:26px}
  .cartao{width:min(320px,100%)}
  .nivel{gap:26px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}

/* ================= páginas internas ================= */
.trilha{border-bottom:1px solid var(--linha);padding:14px 0;font-size:15px;color:var(--grafite-medio)}
.trilha a{color:var(--grafite-medio);text-decoration:none}
.trilha a:hover{text-decoration:underline}

.abertura{padding:64px 0 56px}
.abertura .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.rotulo{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja);margin:0 0 10px}
h1{font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.02;margin:0 0 22px;font-weight:800;letter-spacing:-.02em}
.cabeca h1{margin-bottom:10px}
.chamada{font-size:1.24rem;line-height:1.6;text-align:justify;hyphens:auto;color:var(--grafite-medio);max-width:34em;margin:0 0 30px}
.foto-abertura{border:3px solid var(--laranja);background:var(--fundo-alt)}
.foto-abertura img{width:100%}
.botoes{display:flex;gap:14px;flex-wrap:wrap}

.secao h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;margin:0 0 8px;font-weight:800;letter-spacing:-.015em}
.secao>.wrap>.subtitulo{margin:0 0 18px}
.secao>.wrap>.regua{margin:0 0 34px}
.cabeca .subtitulo{margin:0}
.cabeca .regua{margin:20px auto 0}

.especs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:34px 44px}
.espec{padding-top:18px;border-top:3px solid var(--laranja)}
.espec h3{font-size:1.16rem;margin:0 0 8px;font-weight:700}
.espec p{margin:0;color:var(--grafite-medio);font-size:1.02rem}

.modulo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.modulo figure{margin:0;border:3px solid var(--ocre)}
.texto{max-width:40em;text-align:justify;hyphens:auto}
.texto p{margin:0 0 18px}

.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.galeria img{width:100%;border:2px solid var(--linha)}
.galeria-retrato{grid-template-columns:minmax(0,520px);justify-content:center}

.fechamento{background:var(--grafite);color:#fff;padding:62px 0;text-align:center}
.fechamento h2{margin:0 0 14px;font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.fechamento p{max-width:32em;margin:0 auto 28px;color:#D8D5D0;font-size:1.1rem}

.sem-foto{aspect-ratio:4/3;display:grid;place-items:center;background:var(--fundo-alt);
  border:2px dashed var(--linha);color:#8A8681;font-size:.85rem;text-align:center;padding:14px}

.aviso{padding:16px 18px;margin:0 0 22px;font-weight:600}
.aviso-ok{background:#1E4D3A;color:#B6F0D4}
.aviso-erro{background:#5A2320;color:#F6C9C6}

/* ================= vídeos: carregam só ao clique ================= */
.grade-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{width:100%;height:100%;border:0;display:block}
.video button{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;
  background:rgba(0,0,0,.18);border:0;display:grid;place-items:center}
.video button::after{content:"";width:64px;height:64px;border-radius:50%;
  background:var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/32px no-repeat;
  box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .15s ease,background-color .15s ease}
.video button:hover{background:rgba(0,0,0,.05)}
.video button:hover::after{background-color:var(--laranja-escuro);transform:scale(1.06)}

/* ================= logos de clientes ================= */
/* Grade de células iguais: 8 colunas (32 logos = 4 linhas cheias), 4 em
   tablet, 2 em celular. Cada logo já vem sem borda vazia (aparado pelo
   converter-webp.py) e é encaixado numa área fixa de 64px de altura, então
   todos ficam com tamanho visual parecido, independente do arquivo original. */
.clientes-titulo{margin:72px 0 26px;text-align:center;font-size:.95rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite-medio)}
.clientes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.clientes li{margin:0;height:168px;padding:26px 32px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--linha);border-radius:8px}
.clientes img{max-width:100%;max-height:108px;width:auto;height:auto;
  filter:grayscale(1);opacity:.82;transition:filter .2s ease,opacity .2s ease}
.clientes li:hover img{filter:none;opacity:1}
@media (max-width:1000px){.clientes{gap:14px}.clientes li{height:136px;padding:18px 22px}.clientes img{max-height:86px}}
@media (max-width:560px){.clientes{grid-template-columns:repeat(2,1fr);gap:10px}.clientes li{height:112px;padding:14px 18px}.clientes img{max-height:70px}}

/* ================= diferenciais com ícone ================= */
/* ícone dos diferenciais: SVG de linha, todos no mesmo estilo, num disco claro */
.dif-icone{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(233,139,21,.12);color:var(--laranja-escuro);margin:0 0 16px}
.dif-icone svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .abertura .wrap,.modulo{grid-template-columns:1fr;gap:38px}
  .abertura{padding:40px 0}
}


/* ================= depoimentos ================= */
.depos{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px;align-items:stretch;grid-auto-rows:1fr}
.depo{margin:0;display:flex;flex-direction:column;background:#fff;padding:30px 30px 26px;border-left:5px solid var(--vermelho);
  box-shadow:0 2px 12px rgba(0,0,0,.05)}
.depo blockquote{flex:1;margin:0 0 18px;font-size:1.06rem;line-height:1.65;color:var(--grafite)}
.depo blockquote::before{content:"\201C";display:block;font-size:3.4rem;line-height:.55;
  color:var(--laranja);margin-bottom:10px;font-family:Georgia,serif}
.depo figcaption{display:flex;align-items:center;gap:16px;font-size:1rem;line-height:1.4;
  padding-top:18px;border-top:1px solid var(--linha)}
.depo figcaption strong{display:block;font-weight:700}
.depo figcaption span{color:var(--grafite-medio)}
/* logo da empresa do depoente: caixa fixa, logo encaixado sem deformar */
@media (max-width:700px){.depos{grid-auto-rows:auto}}
.depo-logo{flex:0 0 112px;width:112px;height:56px;object-fit:contain;object-position:left center}

/* justificar so em tela larga: em coluna estreita abre "rios" de espaco */
@media (max-width:640px){.texto,.texto-centro,.chamada{text-align:left}.grade-solucoes p{font-size:.95rem}}