/* =========================================================
   ISO Técnica — versão clean: fundo claro, marinho e laranja
   apenas em detalhes (carregado depois de base/paginas)
   ========================================================= */

/* ---- topo e cabeçalho claros ---- */
.topo{ background:#fff; color:var(--tx-medio); border-bottom:1px solid var(--linha); }
.topo__fones a:hover,.topo a:hover{ color:var(--navy); }
.cab{ background:#fff; box-shadow:0 1px 0 var(--linha); }
.cab::after{ height:3px; background:var(--orange); }
.menu > li > a{ color:var(--navy); }
.menu > li > a:hover{ color:var(--orange-600); }
.menu__loja{ color:var(--orange-600) !important; }
.hamb{ background:var(--papel); border-color:var(--linha); }
.hamb span,.hamb span::before,.hamb span::after{ background:var(--navy); }
.cab__cta .btn--navy{ border:0; }
@media (max-width:1180px){
  .menu{ background:#fff; border-top:1px solid var(--linha); }
  .menu > li{ border-bottom-color:var(--linha); }
  .mega__tit{ color:var(--orange-600); }
  .mega__lista a{ color:var(--tx-medio); }
  .mega__lista a:hover{ background:var(--papel); color:var(--navy); }
}

/* ---- banner: texto sobre fundo claro, foto só na metade direita ---- */
.hero{ background:#fff; color:var(--tx); }
.hero__brasa{ display:none; }
.hero__fundo{ position:absolute; left:54%; right:0; top:0; bottom:0; }
.hero__fundo::after{ content:""; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 18%); }
.hero__slide.ativo{ opacity:1; }
.hero__inner{ max-width:600px; padding:76px 0 70px; }
.hero__selo{ color:var(--tx-medio); background:var(--papel); border-color:var(--linha); }
.hero h1{ color:var(--navy); }
.hero h1 em{ color:var(--orange); }
.hero h2{ color:var(--tx-medio); }
.hero h2 strong{ color:var(--tx); }
.hero__fatos{ border-top-color:var(--linha); }
.fato{ color:var(--tx-medio); }
.hero .btn--linha-claro,.capa .btn--linha-claro,.faixa .btn--linha-claro,.store .btn--linha-claro{
  border-color:var(--navy); color:var(--navy); background:transparent;
}
.hero .btn--linha-claro:hover,.capa .btn--linha-claro:hover,.faixa .btn--linha-claro:hover,.store .btn--linha-claro:hover{ background:var(--navy); color:#fff; }
.hero__pontos{ left:54%; right:0; }
.hero__pontos button{ background:rgba(255,255,255,.55); }
@media (max-width:980px){
  .hero__fundo{ position:relative; left:auto; right:auto; height:230px; }
  .hero__fundo::after{ display:none; }
  .hero__inner{ padding:36px 0 48px; }
  .hero__pontos{ left:0; right:0; top:200px; bottom:auto; }
}

/* ---- faixa de números: clara, azul só no número ---- */
.numeros{ background:var(--papel); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.numero{ border-left-color:var(--linha); }
.numero b{ color:var(--navy); }
.numero b i{ color:var(--orange); }
.numero span{ color:var(--tx-medio); }

/* ---- capa das páginas internas: clara ---- */
.capa{ background:var(--papel); color:var(--tx); border-bottom:1px solid var(--linha); }
.capa__fundo,.capa__brasa{ display:none; }
.capa h1{ color:var(--navy); }
.capa p{ color:var(--tx-medio); }
.migalha{ color:var(--tx-suave); }
.migalha a:hover{ color:var(--navy); }
.migalha span[aria-current]{ color:var(--orange-600); }
.capa__foto{ box-shadow:var(--sombra); }

/* ---- serviços: cards claros com foto em cima ---- */
.svc{
  position:relative; aspect-ratio:auto; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--linha); border-radius:var(--r-lg); overflow:hidden; box-shadow:none;
}
.svc::after{ display:none; }
.svc img{ position:static; width:100%; aspect-ratio:16/10; object-fit:cover; }
.svc__txt{ position:static; padding:16px 18px 18px; border-top:3px solid var(--orange); }
.svc__txt h3{ color:var(--navy); font-size:19px; }
.svc__txt span{ color:var(--orange-600); }
.svc:hover{ border-color:var(--navy); box-shadow:var(--sombra); }
.svc__barra{ display:none; }

/* ---- blocos de destaque: claros com detalhe ---- */
.store{ background:var(--papel); border:1px solid var(--linha); color:var(--tx); }
.store::before{ display:none; }
.store h2{ color:var(--navy); }
.store p{ color:var(--tx-medio); }
.faixa{ background:#fff; color:var(--tx); border-top:4px solid var(--orange); border-bottom:1px solid var(--linha); }
.faixa::before{ display:none; }
.faixa h2{ color:var(--navy); }
.faixa p{ color:var(--tx-medio); }
.orc-lado{ background:#fff; border:1px solid var(--linha); color:var(--tx-medio); border-top:4px solid var(--orange); }
.orc-lado h3{ color:var(--navy); }
.calc-ex{ background:var(--papel); border:1px solid var(--linha); color:var(--tx); }
.calc-ex > b{ color:var(--navy); }
.calc-ex dl > div{ color:var(--tx-medio); border-bottom-color:var(--linha); }
.calc-ex dd{ color:var(--navy); }
.calc-ex .calc-ex__tot dt{ color:var(--navy); }
.calc-ex .calc-ex__tot dd{ color:var(--orange-600); }
.calc-ex > p{ color:var(--tx-medio); }
.calc-ex .rotulo{ color:var(--orange); }
.res__cab{ background:var(--papel); color:var(--tx); border:1px solid var(--linha); }
.res__cab .rot{ color:var(--tx-suave); }
.res__num b{ color:var(--navy); }
.res__num span,.res__frase{ color:var(--tx-medio); }
.obra__tag{ background:var(--orange); }
.stat b{ color:var(--navy); }

/* título do banner: cabe na coluna sem partir palavra */
.hero h1{ font-size:clamp(30px,3.6vw,48px); overflow-wrap:normal; }
.hero__inner{ max-width:640px; }
@media (max-width:420px){ .hero h1{ font-size:28px; overflow-wrap:anywhere; } }

/* ---- degradês suaves para diferenciar os blocos ---- */
.hero{ background:linear-gradient(135deg,#FFFFFF 0%,#F3F3F4 55%,#E8E8EA 100%); }
.hero__fundo::after{ background:linear-gradient(90deg,#F0F0F2 0%,rgba(240,241,248,0) 18%); }
.numeros{ background:linear-gradient(90deg,#2C2D31 0%,#3A3B41 100%); border:0; }
.numeros .numero b,.numeros .numero b i{ color:#fff; }
.numeros .numero b i{ color:var(--flame-1); }
.numeros .numero span{ color:var(--tx-claro-2); }
.numeros .numero{ border-left-color:var(--linha-esc); }
.sec--papel{ background:linear-gradient(180deg,#FFFFFF 0%,#F2F2F3 12%,#F2F2F3 88%,#FFFFFF 100%); }
.capa{ background:linear-gradient(120deg,#F4F4F5 0%,#FFFFFF 60%,#FFF3EA 100%); }
.store{ background:linear-gradient(120deg,#F3F3F4,#FFFFFF 55%,#FFF1E6); }
.faixa{ background:linear-gradient(120deg,#FFFFFF 0%,#FFF3EA 100%); }
.calc-ex,.res__cab,.orc-lado{ background:linear-gradient(160deg,#FFFFFF,#F3F3F4); }
.caixa__tit{ background:linear-gradient(90deg,var(--navy),var(--navy-700)); }
.rodape{ background:linear-gradient(180deg,#2C2D31 0%,#1B1C1F 100%); }
.stat,.card{ background:linear-gradient(180deg,#FFFFFF,#F7F7F8); }

/* ---- banner com cor: degradê de marinho claro a laranja claro ---- */
.hero{ background:linear-gradient(120deg,#DEDEE1 0%,#ECECEE 38%,#F6F3F5 62%,#FFE9D8 100%); }
.hero__fundo::after{ background:linear-gradient(90deg,#EFEFF1 0%,rgba(238,239,248,0) 22%); }
.hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 54%,var(--orange) 54%,var(--orange) 100%);
}
.hero__selo{ background:#fff; }
.hero{ background:linear-gradient(165deg,#DCDDE0 0%,#ECEDEF 40%,#F4E9E4 72%,#FFD9BE 100%); }
.hero__fundo::after{ background:linear-gradient(90deg,#ECEDEF 0%,rgba(230,232,245,0) 24%); }


/* identidade: cinza-escuro no lugar do marinho; laranja mantido nos detalhes */
.hero{ background:linear-gradient(165deg,#D9DADD 0%,#ECECEE 40%,#F4EEEA 72%,#FFD9BE 100%); }
.hero__fundo{ bottom:0; }
.hero__inner{ padding-bottom:70px; }
.hero__pontos{ top:auto; bottom:26px; left:54%; right:0; justify-content:center; }
@media (max-width:980px){ .hero__pontos{ top:200px; bottom:auto; left:0; right:0; } .hero__inner{ padding-bottom:48px; } }

/* ---- transição limpa entre as fotos do banner + cinza mais presente ---- */
.hero{ background:linear-gradient(165deg,#C4C5C9 0%,#D8D9DC 38%,#E9E4E0 70%,#FFD3B4 100%); }
.hero__fundo{
  left:50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.hero__fundo::after{ display:none; }
.hero__slide{ transform:none !important; transition:opacity 1.2s ease; }
.hero__pontos{ left:50%; }
@media (max-width:980px){
  .hero__fundo{ -webkit-mask-image:none; mask-image:none; }
}

/* ---- números: cartões flutuantes sobre a base do banner ---- */
.numeros{ background:transparent; border:0; position:relative; z-index:4; margin-top:-44px; }
.numeros .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 var(--gutter) 8px; }
.numeros .numero{
  background:#fff; border:1px solid var(--linha); border-left:4px solid var(--orange); border-radius:var(--r-lg);
  padding:22px 24px; box-shadow:0 14px 34px -18px rgba(0,0,0,.28);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.numeros .numero:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(0,0,0,.32); }
.numeros .numero b{ color:var(--navy); font-size:clamp(30px,3.2vw,40px); }
.numeros .numero b i{ color:var(--orange); }
.numeros .numero span{ color:var(--tx-medio); font-size:14px; }
.hero__inner{ padding-bottom:110px; }
@media (max-width:980px){
  .numeros{ margin-top:16px; }
  .numeros .wrap{ grid-template-columns:1fr 1fr; gap:12px; }
  .hero__inner{ padding-bottom:40px; }
}
@media (max-width:480px){ .numeros .numero{ padding:16px 18px; } .numeros .numero b{ font-size:28px; } }

.hero::before{ display:none; }

/* ---- vitrine com abas: "Onde a impermeabilização mais faz diferença" ---- */
.mostra{ display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; }
.mostra__abas{ display:grid; gap:8px; }
.mostra__aba{
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  padding:15px 18px; border:1px solid var(--linha); border-radius:var(--r-lg); background:#fff;
  font-family:var(--f-tit); font-size:18px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--navy);
  transition:.2s var(--ease);
}
.mostra__aba i{ font-style:normal; font-size:13px; color:var(--tx-suave); font-weight:700; }
.mostra__aba:hover{ border-color:var(--orange); transform:translateX(3px); }
.mostra__aba[aria-selected="true"]{ background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 12px 26px -14px rgba(255,106,19,.8); }
.mostra__aba[aria-selected="true"] i{ color:rgba(255,255,255,.8); }
.mostra__aba:focus-visible{ outline:3px solid var(--flame-1); outline-offset:2px; }
.mostra__painel{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--linha); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sombra); animation:mostraIn .35s var(--ease); }
.mostra__painel[hidden]{ display:none; }
.mostra__foto{ margin:0; min-height:380px; }
.mostra__foto img{ width:100%; height:100%; object-fit:cover; }
.mostra__txt{ padding:34px 32px; display:flex; flex-direction:column; justify-content:center; }
.mostra__txt h3{ font-size:clamp(24px,2.6vw,32px); color:var(--navy); margin-bottom:12px; }
.mostra__txt p{ color:var(--tx-medio); font-size:15.5px; }
.mostra__acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
@keyframes mostraIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:1000px){
  .mostra{ grid-template-columns:1fr; }
  .mostra__abas{ grid-template-columns:repeat(3,1fr); }
  .mostra__aba{ padding:12px 12px; font-size:15px; gap:8px; }
  .mostra__aba i{ display:none; }
  .mostra__painel{ grid-template-columns:1fr; }
  .mostra__foto{ min-height:220px; max-height:300px; }
}
@media (max-width:560px){ .mostra__abas{ grid-template-columns:repeat(2,1fr); } .mostra__txt{ padding:22px 18px; } }

/* ---- cantos arredondados ---- */
.btn{ border-radius:8px; }
.cab__cta .btn,.hero__acoes .btn{ border-radius:8px; }
.hero__selo{ border-radius:8px; }
.hero__selo b{ border-radius:6px; }
.mostra__aba{ border-radius:12px; }
.mostra__painel,.numeros .numero,.svc,.obra,.galeria__i,.calc-ex,.orc-lado,.caixa,.card,.stat,.store,.form,.contato-card,.capa__foto{ border-radius:14px; }
.svc img{ border-radius:0; }
.calc__lista label,.calc__ent input,.calc__seg,.res__cab,.res__aviso,.calc__aguarda,.calc__vazio{ border-radius:10px; }
.cat__cab i,.obra__tag,.calc__cab i{ border-radius:6px; }
.mega{ border-radius:0 0 14px 14px; }
.hero__pontos button{ border-radius:99px; }

/* ---- parceiros: logos coloridos passando para o lado ---- */
.marquee{ overflow:hidden; display:flex; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__faixa{ display:flex; align-items:center; gap:56px; padding:8px 28px; margin:0; list-style:none; flex:none; animation:marquee 28s linear infinite; }
.marquee__faixa li{ flex:none; display:flex; align-items:center; height:64px; }
.marquee__faixa img{ height:52px; width:auto; max-width:200px; object-fit:contain; filter:none; opacity:1; padding:0; background:none; box-shadow:none; }
.marquee:hover .marquee__faixa{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
@media (max-width:760px){ .marquee__faixa{ gap:36px; animation-duration:20s; } .marquee__faixa img{ height:40px; max-width:150px; } }
@media (prefers-reduced-motion:reduce){ .marquee__faixa{ animation:none; } .marquee{ flex-wrap:wrap; justify-content:center; mask-image:none; -webkit-mask-image:none; } }

/* ---- avaliações do Google ---- */
.aval{ background:#fff; border:1px solid var(--linha); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:12px; }
.aval__topo{ display:flex; align-items:center; gap:12px; }
.aval__topo > div{ flex:1; } .aval__topo b{ display:block; font-size:15px; color:var(--navy); } .aval__topo small{ color:var(--tx-suave); font-size:12.5px; }
.aval__av{ width:42px; height:42px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; flex:none; }
.aval__estrelas{ display:flex; gap:2px; } .aval p{ color:var(--tx-medio); font-size:15px; }
.aval__media{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:10px 16px; background:#fff; border:1px solid var(--linha); border-radius:99px; font-size:14px; color:var(--tx-medio); }
.aval__media b{ font-size:20px; color:var(--navy); }

/* avaliacoes: 4 colunas no desktop */
.aval__grade{ grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1100px){ .aval__grade{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .aval__grade{ grid-template-columns:1fr; } }
.aval__media{ flex-wrap:wrap; justify-content:center; }