de texto (`.setor > div`): escritos como
".setor b" / ".setor span" eles teriam especificidade (0,1,1), maior que a
de ".setor__ico" (0,1,0), e passariam por cima do ícone — foi exatamente o
que aconteceu até 08/08/2026: o badge herdava display:block (matando o
place-items:center, com o glifo grudado no topo), margin-top:6px (o ícone
descia 6px em relação ao título) e a cor de texto secundária no lugar do
laranja da marca. Não reescrever sem o "> div". */
.setor > div b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:.98rem;line-height:1.25}
.setor > div span{display:block;margin-top:6px;font-size:.8438rem;line-height:1.55;color:var(--ink-2)}
.sec--dark .setor{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sec--dark .setor > div b{color:var(--ink-neg)}
.sec--dark .setor > div span{color:var(--ink-neg-3)}
.sec--dark .setor__ico{background:rgba(240,104,48,.14)}
/* Celular: o cartão vira grade de 2 linhas — ícone + título na primeira,
descrição na segunda ocupando a largura toda. Assim o ícone fica no mesmo
eixo horizontal do título (align-items:center) em vez de flutuar ao lado de
um bloco de texto de altura variável, e a descrição ganha ~60px de linha.
`display:contents` no
promove o
e o a itens da grade, sem
mexer no HTML — que é o mesmo das 4 seções que usam este componente. */
@media (max-width:559.98px){
.setor{
display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:13px;row-gap:9px;align-items:center;
}
.setor > div{display:contents}
.setor__ico{grid-column:1;grid-row:1;width:38px;height:38px;border-radius:8px}
.setor__ico svg{width:19px;height:19px}
.setor > div b{grid-column:2;grid-row:1;align-self:center}
.setor > div span{grid-column:1 / -1;grid-row:2;margin-top:0}
}
/* ═══════════ CATÁLOGO DE ENSAIOS (busca + filtro) ═══════════ */
.cat-tools{
position:sticky;top:var(--header-h);z-index:30;
background:var(--c50);
padding-block:16px;margin-bottom:22px;
border-bottom:1px solid var(--c100);
}
.cat-tools--white{background:var(--c0)}
.cat-search{position:relative;display:flex;align-items:center}
.cat-search > svg{position:absolute;left:16px;width:19px;height:19px;pointer-events:none;
fill:none;stroke:var(--c400);stroke-width:2;stroke-linecap:round}
.cat-search input{
width:100%;height:54px;padding:0 52px 0 46px;border-radius:10px;
background:var(--c0);border:1px solid var(--c200);color:var(--ink);font-size:1rem;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.cat-search input::placeholder{color:var(--c400)}
.cat-search input:focus{border-color:var(--laranja);outline:none;
box-shadow:0 0 0 3px rgba(240,104,48,.16)}
.cat-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.cat-clear{
position:absolute;right:10px;width:32px;height:32px;border-radius:50%;border:0;
background:var(--c50);color:var(--ink-2);cursor:pointer;display:none;
align-items:center;justify-content:center;
}
.cat-clear.is-on{display:flex}
.cat-clear:hover{background:var(--c100);color:var(--laranja)}
.cat-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cat-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.fchip{
display:inline-flex;align-items:center;gap:9px;cursor:pointer;
padding:9px 17px;border-radius:999px;border:1px solid var(--c200);background:var(--c0);
font-family:'Inter',sans-serif;font-size:.85rem;color:var(--ink-2);
transition:all .28s var(--ease);
}
.fchip:hover{border-color:var(--laranja);color:var(--ink)}
.fchip.is-on{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600}
.fchip em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
opacity:.75;letter-spacing:.04em}
.cat-count{
margin-top:14px;font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.cat-count b{color:var(--laranja)}
/* ---- tabela do catálogo ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m)}
.tbl{width:100%;border-collapse:collapse;background:var(--c0);
border:1px solid var(--c100);border-radius:var(--r-m);overflow:hidden}
.tbl thead th{
text-align:left;padding:14px 18px;background:var(--grafite);color:var(--ink-neg);
font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
}
.tbl tbody tr{border-top:1px solid var(--c100);transition:background .25s var(--ease)}
.tbl tbody tr:hover{background:#FAFAFA}
.tbl td{padding:15px 18px;vertical-align:top;font-size:.9063rem;line-height:1.55}
.tbl td.c-n{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--c400);
font-size:.8rem;width:56px;white-space:nowrap;padding-top:17px}
.tbl td.c-serv{color:var(--ink);min-width:270px}
.tbl td.c-norma{font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.8125rem;color:var(--ink-2);min-width:210px}
.tbl td.c-set{width:1%;white-space:nowrap}
.tag{
display:inline-block;padding:5px 11px;border-radius:999px;
font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.66rem;letter-spacing:.08em;white-space:nowrap;
border:1px solid var(--c100);background:var(--c50);color:var(--ink-2);
}
.tag--s1{border-color:rgba(240,104,48,.4);background:rgba(240,104,48,.09);color:#B84A1C}
.tag--s2{border-color:rgba(69,90,100,.32);background:rgba(69,90,100,.09);color:#37474F}
.tag--s3{border-color:rgba(46,125,50,.3);background:rgba(46,125,50,.08);color:#2E7D32}
.tag--s4{border-color:rgba(90,92,94,.34);background:rgba(90,92,94,.09);color:#4A4C4E}
mark{background:rgba(240,104,48,.24);color:inherit;border-radius:3px;padding:0 2px}
.cat-empty{
display:none;padding:52px 26px;text-align:center;background:var(--c0);
border:1px dashed var(--c200);border-radius:var(--r-m);color:var(--ink-2);
}
.cat-empty.is-on{display:block}
.cat-empty b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:1.05rem;color:var(--ink);margin-bottom:8px}
/* tabela vira cartão no mobile */
@media (max-width:819.98px){
.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
.tbl{border:0;background:transparent}
.tbl thead{display:none}
.tbl tbody tr{
background:var(--c0);border:1px solid var(--c100);border-radius:var(--r-m);
padding:16px 18px;margin-bottom:12px;
}
.tbl tbody tr:hover{background:var(--c0)}
.tbl td{padding:0;min-width:0!important;width:auto!important}
.tbl td.c-n{display:inline-block;width:auto!important;padding:0;margin-bottom:8px}
.tbl td.c-set{display:inline-block;width:auto!important;margin:0 0 8px 10px}
.tbl td.c-serv{font-weight:600;font-size:.95rem}
.tbl td.c-norma{margin-top:9px;padding-top:9px;border-top:1px dashed var(--c100)}
.tbl td.c-norma::before{
content:"Norma de referência";display:block;margin-bottom:4px;
font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c400);
}
}
/* ═══════════ GRUPOS DE SERVIÇOS (recuperação / inspeções) ═══════════ */
.grp{margin-bottom:clamp(38px,5vw,60px)}
.grp:last-child{margin-bottom:0}
.grp__head{
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
padding-bottom:14px;margin-bottom:22px;border-bottom:2px solid var(--laranja);
}
.grp__head h3{font-family:'Montserrat',sans-serif;font-weight:800;
font-size:clamp(1.12rem,2vw,1.42rem);letter-spacing:-.01em}
.grp__head em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c400)}
.grp__list{display:grid;gap:clamp(12px,1.6vw,16px);
grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.svc{
background:var(--c0);border:1px solid var(--c100);border-left:3px solid var(--laranja);
border-radius:var(--r-s);padding:clamp(18px,2vw,22px);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh-med)}
.svc__n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.68rem;
letter-spacing:.16em;color:var(--c400);margin-bottom:8px}
.svc__t{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.98rem;
line-height:1.35;color:var(--ink)}
.svc__norma{
margin-top:12px;padding-top:11px;border-top:1px dashed var(--c100);
font-family:'IBM Plex Mono',monospace;font-weight:500;
font-size:.75rem;line-height:1.55;color:var(--ink-2);
}
.svc__norma::before{
content:"Norma";display:block;margin-bottom:4px;
font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja);
}
/* ═══════════ SETORES DO CONTROLE TECNOLÓGICO (4 cartões com foto) ═══════════ */
.setcards{display:grid;gap:clamp(16px,2vw,22px);
grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.setcard{
position:relative;overflow:hidden;border-radius:var(--r-m);
border:1px solid rgba(255,255,255,.12);background:var(--grafite-deep);
min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(18px,2.2vw,24px);color:var(--ink-neg);
transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.setcard:hover{transform:translateY(-4px);border-color:var(--laranja)}
.setcard img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
filter:grayscale(.5) contrast(1.05);transition:transform .7s var(--ease),filter .5s var(--ease);
}
.setcard:hover img{transform:scale(1.05);filter:grayscale(.15)}
.setcard::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(34,35,37,.35) 0%,rgba(34,35,37,.88) 62%,rgba(34,35,37,.96) 100%)}
.setcard > *{position:relative;z-index:2}
.setcard__q{
font-family:'Montserrat',sans-serif;font-weight:800;
font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1;color:var(--laranja);letter-spacing:-.02em;
}
.setcard__t{margin-top:10px;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:1.02rem;line-height:1.25;color:#fff}
.setcard__s{margin-top:8px;font-size:.8125rem;line-height:1.5;color:var(--ink-neg-3)}
/* ═══════════ FAIXA DE CTA ═══════════ */
.ctaband{
background:linear-gradient(120deg,var(--laranja) 0%,var(--laranja-2) 100%);
color:#fff;padding-block:clamp(44px,6vw,72px);position:relative;overflow:hidden;
}
.ctaband::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
background-size:22px 22px;opacity:.5;
}
.ctaband .wrap{position:relative;z-index:1;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:clamp(22px,3vw,44px)}
.ctaband h2{font-family:'Montserrat',sans-serif;font-weight:800;
font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.15;letter-spacing:-.015em;max-width:22ch}
.ctaband p{margin-top:10px;font-size:.9688rem;color:rgba(255,255,255,.92);max-width:52ch}
.ctaband__acts{display:flex;flex-wrap:wrap;gap:12px}
.btn--onorange{background:#fff;color:var(--grafite)}
.btn--onorange:hover{background:var(--grafite-deep);color:#fff;transform:translateY(-2px)}
.btn--onorange-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn--onorange-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
/* ═══════════ CERTIFICAÇÕES EM DESTAQUE ═══════════ */
.certs{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cert{
background:var(--c0);border:1px solid var(--c100);border-top:3px solid var(--laranja);
border-radius:var(--r-m);padding:clamp(24px,2.8vw,32px);box-shadow:var(--sh-low);
}
.cert__b{
width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
background:rgba(240,104,48,.1);color:var(--laranja);margin-bottom:18px;
}
.cert__b svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.cert h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.cert p{margin-top:12px;font-size:.9063rem;line-height:1.65;color:var(--ink-2)}
/* .feat nasceu para faixas dark (texto claro). Em faixa clara precisa inverter. */
.sec--light .feat li,.sec--white .feat li{color:var(--ink-2)}
.sec--light .feat li b,.sec--white .feat li b{color:var(--ink)}
/* ícone de link externo dentro de botões: sem isso o path sai preenchido de
preto. O tamanho vale para QUALQUER botão, não só os de dentro de .cert —
foi por a regra estar presa a ".cert .btn svg" que a barra .certs-acts
nasceu com o ícone no tamanho padrão de imagem substituída (300px) e
provocou 13px de overflow em 375px. Os ícones EXT/INSTA também passaram a
trazer width/height próprios (ver o gerador), como rede de segurança para
qualquer lugar novo onde forem usados sem regra de CSS. */
.btn svg,.cert svg:not(.cert__b svg){fill:none;stroke:currentColor}
.btn svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cert .btn svg,.certs-acts .btn svg{width:15px;height:15px}
/* ═══════════ TRABALHE CONOSCO ═══════════ */
.why{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.why li{
background:var(--c0);border:1px solid var(--c100);border-radius:var(--r-m);
padding:clamp(22px,2.4vw,28px);
}
.why b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;
margin-bottom:10px}
.why b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--laranja);
transform:rotate(45deg);margin-right:11px;vertical-align:middle}
.why span{display:block;font-size:.9063rem;line-height:1.65;color:var(--ink-2)}
.apply{
background:var(--c0);border:1px solid var(--c100);border-left:3px solid var(--laranja);
border-radius:var(--r-m);padding:clamp(26px,3.2vw,40px);box-shadow:var(--sh-low);
}
.apply h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.5rem);
letter-spacing:-.01em}
.apply ol{margin:22px 0 0;display:grid;gap:14px;counter-reset:passo;list-style:none}
.apply ol li{display:flex;gap:15px;align-items:flex-start;font-size:.9375rem;
line-height:1.6;color:var(--ink-2)}
/* o texto do passo tem de ser UM item flex: sem o span, cada / inline
vira um item e a frase quebra em colunas */
.apply ol li > span{flex:1;min-width:0}
.apply ol li::before{
counter-increment:passo;content:counter(passo,decimal-leading-zero);
flex:none;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.72rem;
color:var(--laranja);border:1px solid var(--c100);border-radius:6px;
width:30px;height:30px;display:grid;place-items:center;background:var(--c50);
}
.apply .btn{margin-top:26px}
/* o overline ocupa a linha inteira acima do título do bloco */
.colab__head .overline{flex:0 0 100%}
/* ═══════════ MAPAS DAS UNIDADES (Google Maps embed) ═══════════
Substituíram o placeholder desenhado em CSS (classes .mapa/.mapa__pin/
.mapa__body, removidas em 08/08/2026). Lado a lado no desktop, empilhados
no celular. O iframe do Google é a única requisição externa do site — o
one-pager offline, por isso, não recebeu este bloco. */
.mapas{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr;margin-top:clamp(30px,4vw,46px)}
@media (min-width:820px){ .mapas{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mapa2{
position:relative;border-radius:12px;overflow:hidden;min-width:0;
border:1px solid rgba(255,255,255,.13);background:#2a2b2d;
}
.mapa2 iframe{
display:block;width:100%;height:clamp(230px,32vw,300px);border:0;
filter:grayscale(.28) contrast(1.04);
}
.mapa2 figcaption{padding:16px clamp(16px,2vw,20px) 18px;background:rgba(255,255,255,.04)}
.mapa2 figcaption b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:.98rem;line-height:1.25;color:var(--ink-neg)}
.mapa2 figcaption span{display:block;margin-top:6px;font-size:.8125rem;line-height:1.5;color:var(--ink-neg-3)}
.mapa2 figcaption a{
display:inline-flex;align-items:center;gap:7px;margin-top:11px;
font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.7rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--laranja);
border-bottom:1px solid rgba(240,104,48,.42);padding-bottom:2px;
}
.mapa2 figcaption a:hover{border-bottom-color:var(--laranja)}
.mapa2 figcaption a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
/* ═══════════ BLINDAGEM CONTRA OVERFLOW HORIZONTAL ═══════════
Faixas 1fr assumem min-width:auto (= min-content) e podem ser
empurradas por um botão nowrap ou um e-mail longo. minmax(0,1fr)
trava isso na origem. */
.split,.contact,.quality,.mvv,.stats,.cards-3,.setores,.setcards,
.certs,.why,.grp__list,.gal,.gal--3,.works{ min-width:0 }
.split > *,.contact > *,.quality > *,.mvv > *,.cards-3 > *,
.setores > *,.setcards > *,.certs > *,.why > *,.grp__list > *{ min-width:0 }
.split{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }
.contact{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.quality{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .quality{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }
.mvv{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .mvv{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* e-mails e URLs longos não podem esticar o cartão */
.apply a,.unit__list a,.svc__norma,.tbl td.c-norma,.ftr__addr a{overflow-wrap:anywhere}
/* no celular estreito o rótulo do botão quebra em vez de estourar a caixa */
@media (max-width:479.98px){
.btn{white-space:normal;text-align:center}
}
/* menu fullscreen: título longo quebra dentro da tela */
.menu{overflow:hidden auto}
.menu a{overflow-wrap:anywhere}
@media (max-width:399.98px){ .menu a{font-size:1.32rem} }
/* ═══════════ AJUSTES GERAIS DA MULTIPÁGINA ═══════════ */
.sec--tight{padding-block:clamp(44px,6vw,80px)}
.mt-0{margin-top:0}
.prose p + p{margin-top:16px}
.prose p{color:var(--ink-2);font-size:1rem;line-height:1.7}
.sec--dark .prose p{color:var(--ink-neg-2)}
.note{
margin-top:clamp(24px,3vw,34px);padding:18px 22px;border-radius:var(--r-s);
background:rgba(240,104,48,.07);border-left:3px solid var(--laranja);
font-size:.875rem;line-height:1.6;color:var(--ink-2);
}
.sec--dark .note{background:rgba(240,104,48,.1);color:var(--ink-neg-2)}
.split--photo{align-items:stretch}
.photo--tall img{aspect-ratio:3/4}
.photo--wide img{aspect-ratio:16/10}
.photo--plain::after{display:none}
.photo--plain{border-color:var(--c100)}
.gal--3{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .gal--3{grid-template-columns:repeat(3,1fr)} }
/* estado inicial das animações também nos novos blocos */
.js .setcard,.js .pillar__img{clip-path:inset(0 100% 0 0)}
@media (prefers-reduced-motion:reduce){
.js .setcard,.js .pillar__img{clip-path:none}
}
/* ── link direto do WhatsApp: o ícone herda a cor do texto do link ── */
.wa-i{width:1em;height:1em;display:inline-block;vertical-align:-.14em;margin-right:.4em;fill:currentColor;stroke:none}
/* ═══════════ CARTÃO DE OBRA COM FOTO (#obras) ═══════════
Cópia verbatim do bloco equivalente do site-lacrose.html (seção
#portfolio). A apresentação das obras tem de ser idêntica à do
protótipo aprovado: foto sob o degradê, malha técnica desligada,
text-shadow no número/título e a última linha de 2 cards centrada.
Editou lá? Copie de novo — não improvise aqui. */
/* card com foto real: a imagem entra sob o degrade, a malha tecnica sai */
.work__img{
position:absolute;inset:0;z-index:0;
display:block;width:100%;height:100%;object-fit:cover;object-position:center;
filter:grayscale(.32) contrast(1.05);
transition:filter .5s var(--ease);
}
.work--foto .work__ph::before{display:none}
.work--foto .work__ph::after{
background:linear-gradient(180deg,
rgba(34,35,37,0) 0%,rgba(34,35,37,.14) 34%,
rgba(34,35,37,.74) 72%,rgba(34,35,37,.95) 100%);
}
/* fotos claras (arquibancada, ceu) pedem sombra no texto p/ manter o contraste */
.work--foto .work__i,.work--foto .work__t{text-shadow:0 1px 4px rgba(0,0,0,.55)}
.work--foto:hover .work__img{filter:grayscale(0) contrast(1.02)}
@media (hover:none){ .work__img{filter:grayscale(0) contrast(1.02)} }
@media (prefers-reduced-motion:reduce){ .work__img{transition:none} }
/* praca da obra, ao lado do indice e no mesmo mono */
.work__loc{color:var(--ink-neg-2);font-weight:400}
.work__loc::before{content:"\00b7";margin:0 .5em;color:rgba(255,255,255,.45)}
/* a linha do indice + praca cai sobre trecho claro da foto (telhado branco,
ceu, cobertura) — sombra mais firme que a do titulo p/ nao sumir */
.work--foto .work__i{text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.55)}
/* descricao do servico prestado. No desktop ela mora no hover — o card e' 4/3 e
nao cabe tudo aberto. No touch fica fixa, limitada a 3 linhas: nada de
conteudo preso atras de um hover que no celular nao existe. */
.work__d{
font-size:.8125rem;line-height:1.45;color:var(--ink-neg-2);
text-shadow:0 1px 4px rgba(0,0,0,.55);
}
/* o card NAO pode crescer no hover: com aspect-ratio e overflow visivel o
minimo automatico vira o tamanho do conteudo e a linha inteira da grade
estica junto. overflow:hidden trava a altura em 4/3. */
.work--foto .work__ph{overflow:hidden}
@media (hover:hover){
.work__d{
font-size:.75rem;line-height:1.42;
margin-top:0;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);
transition:max-height .3s var(--ease),opacity .3s var(--ease),
transform .3s var(--ease),margin-top .3s var(--ease);
}
/* no hover a moldura interna afina p/ a descricao caber inteira */
.work--foto .work__ph{transition:transform .6s var(--ease),padding .3s var(--ease)}
.work--foto:hover .work__ph,.work--foto:focus-within .work__ph{
padding:clamp(14px,1.5vw,17px);
}
.work--foto:hover .work__d,.work--foto:focus-within .work__d{
margin-top:7px;max-height:11em;opacity:1;transform:none;
}
/* degrade aprofundado no hover: a descricao precisa de mais contraste */
.work--foto .work__ph::after{transition:background .3s var(--ease)}
.work--foto:hover .work__ph::after,.work--foto:focus-within .work__ph::after{
background:linear-gradient(180deg,
rgba(34,35,37,.34) 0%,rgba(34,35,37,.62) 24%,
rgba(34,35,37,.92) 58%,rgba(34,35,37,.98) 100%);
}
}
@media (hover:none){
/* 4 linhas: e' o que a descricao mais longa (Caetite) precisa para aparecer
inteira. Cabe folgado no card de 4/3 do celular. */
.work__d{
margin-top:8px;display:-webkit-box;-webkit-line-clamp:4;
-webkit-box-orient:vertical;overflow:hidden;
}
}
@media (prefers-reduced-motion:reduce){
.work__d,.work--foto .work__ph,.work--foto .work__ph::after{transition:none}
}
/* 7 obras: 4 por linha e a ultima linha (3 cards) centralizada.
Grade de 8 colunas com cards de 2: a 5a obra comeca na coluna 2 e sobra
meia coluna de cada lado, centrando a segunda linha. */
@media (min-width:900px){
.works--obras{grid-template-columns:repeat(8,1fr)}
.works--obras > *{grid-column:span 2}
.works--obras > :nth-child(5){grid-column:2 / span 2}
}
/* ═══════════ OVERLINE DO HERO — os 3 pilares ═══════════
Linha longa (98 caracteres em mono com tracking). O gerador envolve cada
pilar num que não quebra por dentro e cola o separador
no fim do pilar anterior: a linha só pode partir entre pilares. Resultado:
1 linha no desktop, 2 em telas médias, 3 (um pilar por linha) no celular —
nunca "DIAGNÓS-TICO" partido no meio e nunca overflow. */
/* min-width:0 é o que permite o texto encolher e quebrar: .overline é flex e
um item anônimo (texto solto) não encolhe abaixo do max-content no Chrome —
a linha inteira vazava para fora da tela. */
.hero .overline .ov-txt{flex:1 1 auto;min-width:0}
.hero .overline .ov-p{white-space:nowrap}
.hero .overline .ov-sep{
font-style:normal;margin:0 .5em;color:rgba(240,104,48,.62);
}
@media (max-width:899.98px){
.hero .overline{
align-items:flex-start;gap:10px;
font-size:.6875rem;letter-spacing:.11em;line-height:1.6;
}
/* a régua acompanha a PRIMEIRA linha do texto, não o centro do bloco */
.hero .overline::before{width:24px;margin-top:.72em}
}
@media (max-width:479.98px){
.hero .overline{font-size:.625rem;letter-spacing:.09em;gap:9px}
.hero .overline::before{width:18px}
}
/* rede de segurança para telas muito estreitas (≤359px): abaixo disso o pilar
mais longo não cabe inteiro, e transbordar é pior que quebrar a palavra */
@media (max-width:359.98px){
.hero .overline .ov-p{white-space:normal;overflow-wrap:anywhere}
}
/* ═══════════ GALERIA — última linha centralizada ═══════════
Mesmo truque da grade de obras: a grade real tem o dobro de colunas e cada
card ocupa 2, então a última linha pode começar em meia coluna. gal--rN diz
quantos cards sobraram na última linha (o gerador calcula len % 4). Com 13
fotos são 4+4+4+1 no desktop e 6×2+1 no celular. */
.gal--r1,.gal--r2,.gal--r3{grid-template-columns:repeat(4,1fr)}
.gal--r1 > *,.gal--r2 > *,.gal--r3 > *{grid-column:span 2}
.gal--r1 > :last-child{grid-column:2 / span 2} /* 2 colunas: 1 órfão */
@media (min-width:900px){
.gal--r1,.gal--r2,.gal--r3{grid-template-columns:repeat(8,1fr)}
.gal--r1 > :last-child{grid-column:4 / span 2} /* 4 colunas: 1 órfão */
.gal--r2 > :nth-last-child(2){grid-column:3 / span 2} /* 4 colunas: 2 órfãos */
.gal--r3 > :nth-last-child(3){grid-column:2 / span 2} /* 4 colunas: 3 órfãos */
}
/* ═══════════ AÇÕES DA SEÇÃO DE CERTIFICAÇÕES ═══════════
Os links externos (certificados e pesquisa de satisfação) ficam FORA dos
cartões: o cartão explica a certificação, a barra é o que se aciona.
Não devolver nenhum dos dois para dentro de um .cert — vira duplicidade. */
.certs-acts{
display:flex;flex-wrap:wrap;gap:12px;
margin-top:clamp(24px,3vw,34px);
}
.certs-acts .btn{flex:0 1 auto}
@media (max-width:559.98px){
.certs-acts{flex-direction:column;align-items:stretch}
/* "Pesquisa de Satisfação do Cliente" não cabe numa linha em 375px */
.certs-acts .btn{justify-content:center;white-space:normal;text-align:center}
}
/* ═══════════ FAIXA DO INSTAGRAM ═══════════
Marquee horizontal com pausa no hover/foco. O trilho tem duas cópias dos
cartões (a segunda com aria-hidden) e desliza -50%: quando termina a
primeira cópia, a animação reinicia exatamente sobre a segunda e o laço é
imperceptível. Sem movimento (prefers-reduced-motion) ou quando entram os
embeds oficiais, vira carrossel de rolagem manual com scroll-snap. */
.ig-faixa .sec-head--linha{
display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:18px 24px;max-width:none;
}
.ig-seguir{flex:none;gap:9px}
.ig-seguir svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.ig-viewport{
--ig-dur:44s;
position:relative;overflow:hidden;
padding-block:4px;
/* as pontas somem em degradê: o corte seco denuncia o laço */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.ig-track{
display:flex;width:max-content;
animation:ig-desliza var(--ig-dur) linear infinite;
}
.ig-dobra{display:contents}
.ig-viewport:hover .ig-track,
.ig-viewport:focus-within .ig-track{animation-play-state:paused}
@keyframes ig-desliza{
from{transform:translate3d(0,0,0)}
/* -50% = exatamente uma cópia do conjunto. Por isso o respiro entre cartões
é margin-right (e não gap): com gap, a metade da largura do trilho cairia
meio respiro fora do lugar e o laço daria um pulo a cada volta. */
to{transform:translate3d(-50%,0,0)}
}
.ig-card{
flex:none;width:clamp(216px,62vw,264px);
margin-right:clamp(12px,1.6vw,18px);
display:flex;flex-direction:column;align-items:flex-start;gap:0;
padding:clamp(18px,2vw,22px);border-radius:var(--r-m);
border:1px solid var(--c100);background:var(--c0);
transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ig-card:hover{border-color:var(--laranja);transform:translateY(-3px);box-shadow:var(--sh-low)}
.ig-card__ico{
width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
background:rgba(240,104,48,.1);color:var(--laranja);
}
.ig-card__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.ig-card__tag{
margin-top:15px;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:.98rem;line-height:1.25;color:var(--ink);
}
.ig-card__sub{margin-top:6px;font-size:.8438rem;line-height:1.55;color:var(--ink-2)}
.ig-card__cta{
margin-top:16px;display:inline-flex;align-items:center;gap:7px;
font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.68rem;
letter-spacing:.11em;text-transform:uppercase;color:var(--laranja);
}
.ig-card__cta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
.ig-card__at{
margin-top:14px;padding-top:13px;width:100%;border-top:1px solid var(--c100);
font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--c600);
}
/* com os embeds oficiais o iframe tem altura variável: nada de marquee */
.ig-track--embed{
animation:none;width:auto;max-width:100%;
overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding-inline:var(--pad-x);
}
.ig-track--embed .ig-slot{
flex:none;width:clamp(280px,84vw,326px);
margin-right:clamp(12px,1.6vw,18px);scroll-snap-align:center;
}
.ig-track--embed .instagram-media{margin:0 !important;min-width:0 !important}
@media (prefers-reduced-motion:reduce){
/* sem animação: a faixa vira carrossel de rolagem manual (dedo/trackpad) */
.ig-track{
animation:none;width:auto;max-width:100%;
overflow-x:auto;scroll-snap-type:x proximity;
padding-inline:var(--pad-x);padding-block:2px;
}
.ig-card{scroll-snap-align:center}
.ig-dobra{display:none}
.ig-card:hover{transform:none}
.ig-viewport{-webkit-mask-image:none;mask-image:none}
}
/* ═══════════ NÚMEROS — grade de 3 tiles ═══════════
A home passou de 4 para 3 números (saiu o tile de contagem de estados). O CSS herdado
do protótipo abre .stats em 2 colunas no mobile e 4 no desktop; aqui ela é
reequilibrada para 3. No mobile o terceiro tile ocupa a linha inteira para
não sobrar meio-tile órfão — a regra está presa a ":nth-child(3):last-child",
então se um quarto número voltar o layout 2x2 volta sozinho. */
@media (min-width:900px){
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899.98px){
.stats > .stat:nth-child(3):last-child{grid-column:1 / -1}
}
/* ═══════════ GALERIA — LEGENDA ABAIXO DA FOTO NO TOQUE ═══════════
Vale para as DUAS galerias que usam o componente: "A Lacrose em campo"
(home, .gal--rN) e "Equipe própria, obra em operação"
(recuperacao-estrutural.html, .gal--3).
O DEFEITO: no celular a grade tem 2 colunas, o card fica com ~157px de
largura e, em 4/3, só ~119px de altura. A legenda sobreposta (índice +
título + descrição, os três juntos porque no toque não existe painel de
hover) mede de 104px a 197px. Como .gal__i tem overflow:hidden, em 11 dos 13
cards da home o índice é cortado fora e no card 06 ("Controle Tecnológico de
Grandes Volumes de Concreto") a PRIMEIRA LINHA do título também some.
Sombra e degradê resolviam contraste, não altura — o texto simplesmente não
cabe dentro da foto.
A CORREÇÃO: no toque a legenda deixa de ser sobreposta e passa a fluir
ABAIXO da foto, em bloco de fundo sólido. Some o corte (nada mais depende do
overflow do card) e some o problema de contraste sobre foto clara, por
construção. Como o fundo é sólido, o degradê e os text-shadow deixam de
fazer sentido e são desligados AQUI — e só aqui.
O GATILHO é a lista `(hover:none),(max-width:599.98px)` (OR):
· (hover:none) — a população realmente afetada (celular/tablet), única em
que os TRÊS blocos de texto vão para cima da foto ao mesmo tempo. Pega
também o tablet em 900–1024px, onde a grade volta a 4 colunas e o card
cai para ~205px: lá o encaixe é de 8px e não sobrevive a um título
maior.
· (max-width:599.98px) — rede de segurança para ponteiro fino em tela
estreita (janela de desktop arrastada, híbridos Windows, renderização de
QA sem emulação de toque). Aí a descrição está oculta pelo
@media (hover:hover), mas só índice + título já encostam na borda de
baixo em 375px.
· o corte em 599.98px e não em 899.98px é de propósito: entre 600 e 899px
o card de 2 colunas tem 280px ou mais e a legenda sobreposta cabe com
folga — ali o painel de hover aprovado continua intacto.
Fundo #222325 (e não var(--grafite) #303030) porque é o tom em que o
degradê aprovado já terminava e porque o índice laranja em 0.62rem sobre
#303030 dá 4.2:1, abaixo de AA; sobre #222325 sobe para 5.0:1.
Contrapartida em site-lacrose.html (CSS inline) — mexeu num, mexa no outro. */
@media (hover:none),(max-width:599.98px){
/* .gal__i continua position:relative DE PROPÓSITO: .gal__hover é
position:absolute;inset:0 e, sem bloco de contenção, escaparia para o
ancestral posicionado e cobriria meia seção com pointer-events ativos.
Quem deixa de ser sobreposta é a legenda, não o card. */
.gal__i{display:flex;flex-direction:column}
/* a foto manda na própria altura: aspect-ratio 4/3 + object-fit:cover.
flex:0 0 auto impede que o flex a estique ou a comprima. */
.gal__i img{flex:0 0 auto}
.gal__i::after{display:none} /* degradê: fundo agora é sólido */
.gal__hover{display:none} /* painel de hover não existe aqui */
.gal__i figcaption{
position:static; /* fim da sobreposição */
flex:1 1 auto; /* cards da mesma linha terminam juntos */
background:#222325;
}
.gal__n,.gal__t,.gal__s{text-shadow:none}
.gal__s{display:block} /* volta no ramo sem toque (≤599.98px) */
/* "Impermeabilização" tem 148px em 0.95rem e a caixa de texto do card em
375px tem 131px: sem isto a palavra estoura 21px e o overflow:hidden do
card come o fim dela (defeito que já existia no layout sobreposto). */
.gal__t,.gal__s{overflow-wrap:anywhere}
}