/* ========================================================================== GHPC — Folha de estilo do site -------------------------------------------------------------------------- NENHUMA cor, fonte ou medida literal aqui: tudo sai das variáveis que lib/tema.php injeta no a partir da marca ativa. É o que permite que AirTAC e G Motion — e as outras dez empresas do grupo — rodem exatamente este arquivo. Antes de escrever um #hex neste arquivo, crie o token. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--sup); overflow-x: hidden; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--primaria); color: #fff; } /* Container: TODO conteúdo se alinha por aqui. Os fundos de seção sangram na largura total da tela, mas o miolo nunca escapa deste eixo. O respiro lateral cede em telas estreitas: 32px de cada lado num aparelho de 320px consomem 20% da largura útil. */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } @media (max-width: 560px) { .wrap { padding: 0 20px; } } @media (max-width: 380px) { .wrap { padding: 0 16px; } } .mono { font-family: var(--mono); } .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--primaria); font-weight: 500; } .kicker-claro { color: var(--sobre-escuro-2); } h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; line-height: 1.18; } .h-secao { font-size: clamp(25px, 3.2vw, 34px); font-weight: 700; margin: 10px 0 0; } .sub-secao { color: var(--texto-2); font-size: 16px; margin: 10px 0 0; max-width: 62ch; } .sec { padding: 64px 0; } .sec-alt { background: var(--sup-2); } .sec-escura { background: var(--escuro-1); color: #fff; position: relative; overflow: hidden; } /* Listras diagonais sutis: a textura que dá peso às faixas escuras sem imagem. */ .listras::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px); } .sec-escura > * { position: relative; z-index: 1; } .cab-secao { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .cab-secao .link-ver { font-size: 14px; font-weight: 600; color: var(--primaria); white-space: nowrap; } .cab-secao .link-ver:hover { text-decoration: underline; } /* ---------------------------------------------------------------- botões -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--raio-btn); font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background .18s, border-color .18s, color .18s; text-align: center; } .btn-p { background: var(--primaria); color: #fff; } .btn-p:hover { background: var(--primaria-hover); } .btn-o { background: transparent; color: var(--primaria); border-color: var(--borda-2); } .btn-o:hover { border-color: var(--primaria); background: var(--primaria-05); } .btn-branco { background: #fff; color: var(--escuro-2); } .btn-branco:hover { background: var(--sup-3); } .btn-branco-o { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn-branco-o:hover { background: rgba(255,255,255,.12); border-color: #fff; } .btn-zap { background: transparent; color: var(--verde); border-color: var(--verde); } .btn-zap:hover { background: var(--verde); color: #fff; } .btn-bloco { width: 100%; } .btn-sm { padding: 9px 15px; font-size: 13px; } /* ================================================================= TOPO == */ /* overflow:hidden é o que permite a faixa fechar: ao rolar, a .wrap vai a zero de altura e o conteúdo dela precisa ser recortado em vez de vazar. */ .topbar { background: var(--escuro-2); color: var(--sobre-escuro); font-size: 12.5px; overflow: hidden; } .topbar .wrap { min-height: var(--h-topbar); height: var(--h-topbar); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; overflow: hidden; transition: height .32s cubic-bezier(.4,0,.2,1), min-height .32s cubic-bezier(.4,0,.2,1), opacity .25s ease; } /* Rolou: a faixa de contato se fecha e entrega o topo ao cabeçalho. */ .rolou .topbar .wrap { height: 0; min-height: 0; opacity: 0; } /* ...mas com a faixa aberta o recorte precisa sair: o seletor de idiomas abre abaixo dos 40px da barra e seria cortado inteiro, sem nada aparecer na tela. O recorte só faz falta durante o fechamento, e aí .rolou já está no . */ html:not(.rolou) .topbar, html:not(.rolou) .topbar .wrap { overflow: visible; } .topbar a { color: var(--sobre-escuro); } .topbar a:hover { color: #fff; } .topbar-e { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .topbar-d { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topbar .destaque { color: #fff; } .topbar .divisor { width: 1px; height: 16px; background: rgba(255,255,255,.18); } .topbar .redes { display: flex; align-items: center; gap: 14px; font-size: 13px; } .topbar .links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Seletor de idiomas: some do fluxo quando só há português cadastrado. */ .idiomas { position: relative; font-family: var(--mono); letter-spacing: .04em; } .idiomas-atual { display: flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: none; color: var(--sobre-escuro); font-size: 12.5px; font-family: var(--mono); padding: 4px 0; } .idiomas-atual:hover { color: #fff; } .idiomas-lista { position: absolute; top: 100%; right: 0; min-width: 176px; background: #fff; color: var(--texto); border-radius: var(--raio-card); box-shadow: var(--sombra-drop); padding: 6px; z-index: 60; display: none; font-family: var(--fonte); letter-spacing: 0; } .idiomas.aberto .idiomas-lista { display: block; } .idiomas-lista button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; cursor: pointer; font-size: 13.5px; border-radius: 6px; text-align: left; color: var(--texto); } .idiomas-lista button:hover { background: var(--sup-3); color: var(--primaria); } .idiomas-lista button.on { color: var(--primaria); font-weight: 700; } /* O widget do Google Tradutor injeta uma barra própria no topo e empurra o para baixo com um `top` inline. Aqui ele é só o motor da tradução — quem troca de idioma é o seletor acima —, então a barra some e o deslocamento é anulado (regra !important vence o estilo inline do widget). Duas classes de iframe porque o Google alternou o nome da barra: a antiga `goog-te-banner-frame` e a atual, ofuscada. */ .skiptranslate { display: none !important; } iframe.goog-te-banner-frame, iframe.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; } html, body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } /* Enquanto a página recarrega no novo idioma, um véu cobre o site: sem ele o clique parece não ter feito nada até o recarregamento acontecer. */ .trad-load { position: fixed; inset: 0; z-index: 9999; display: flex; gap: 14px; align-items: center; justify-content: center; flex-direction: column; background: var(--sup); /* navegador sem color-mix fica com o véu opaco */ background: color-mix(in srgb, var(--sup) 88%, transparent); backdrop-filter: blur(3px); font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); animation: tradFade .18s ease both; } .trad-load::before { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borda); border-top-color: var(--primaria); animation: tradGira .7s linear infinite; } @keyframes tradGira { to { transform: rotate(360deg); } } @keyframes tradFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .trad-load::before { animation-duration: 2s; } .trad-load { animation: none; } } /* =============================================================== HEADER == */ /* Cabeçalho: encostado no topo enquanto a página está no início; ao rolar, ele se desprende e vira uma barra flutuante arredondada, mais baixa e translúcida — o comportamento do layout aprovado. A linha de baixo é box-shadow, e não border-bottom: borda entra na altura do elemento e faria a barra pular 1px no momento em que a sombra a substitui. */ .hdr { --h-atual: var(--h-header); position: sticky; top: 0; z-index: 40; background: var(--sup); box-shadow: 0 1px 0 0 var(--borda); border-radius: 0; margin: 0; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: margin .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1), border-radius .32s ease, background .3s ease, box-shadow .32s ease; } .rolou .hdr { --h-atual: 70px; top: 12px; margin: 12px 16px 0; border-radius: 16px; background: var(--sup); /* sem color-mix o cabeçalho fica opaco, e só */ background: color-mix(in srgb, var(--sup) 86%, transparent); box-shadow: 0 16px 40px -16px rgba(20,22,40,.4); } /* A altura vem de --h-atual porque o item de menu também precisa encolher: ele tem altura própria para o mega-menu abrir colado no cabeçalho, e se ficasse nos 92px seguraria a barra inteira aberta. */ .hdr-in { min-height: var(--h-atual); display: flex; align-items: center; gap: 36px; transition: min-height .32s cubic-bezier(.4,0,.2,1); } /* flex-shrink:0 é o que impede a marca de sumir. O cabeçalho é uma linha flex e os itens de menu têm white-space:nowrap, então quando a barra apertava o logo era o único que podia ceder — e cedia até zero. Entre ~880px e ~1100px ele simplesmente não aparecia na tela. */ .hdr-logo { flex-shrink: 0; } .hdr-logo img { height: var(--logo-altura); width: auto; } .hdr-logo b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .nav { display: flex; align-items: center; gap: 28px; } .nav-item { position: relative; display: flex; align-items: center; min-height: var(--h-atual); transition: min-height .32s cubic-bezier(.4,0,.2,1); } .nav-link { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--texto); white-space: nowrap; } .nav-link:hover, .nav-link.ativo { color: var(--primaria); } .nav-link i { font-size: 10px; color: var(--primaria); } /* Item em destaque do menu ("Orçamento Rápido"): cor da marca, peso 700 e o próprio texto pulsando — escala e opacidade, como no layout aprovado (.orca-pulse, orcaPulse 1.3s ease-in-out infinite). Uma versão anterior daqui usava um halo por trás para não mexer no texto; o layout pede o pulso no texto mesmo, e é ele que manda. */ .nav-link.destaque { color: var(--primaria); font-weight: 700; animation: pulsaDestaque 1.3s ease-in-out infinite; } .nav-link.destaque:hover { color: var(--primaria-hover); } @keyframes pulsaDestaque { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.09); opacity: .55; } } [data-topo=escuro] .hdr .nav-link.destaque { color: var(--primaria); } /* Quem pediu menos movimento não deveria receber um item piscando na nav — o destaque continua, parado, na cor e no peso. */ @media (prefers-reduced-motion: reduce) { .nav-link.destaque { animation: none; } } .hdr-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; } .btn-icone { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--raio-btn); font-size: 16px; cursor: pointer; position: relative; border: 1px solid var(--borda-2); background: var(--sup); color: var(--primaria); } .btn-icone:hover { background: var(--sup-3); } .btn-icone.cheio { background: var(--primaria); border-color: var(--primaria); color: #fff; } .btn-icone.cheio:hover { background: var(--primaria-hover); } .cart-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--acento); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--mono); } .btn-menu { display: none; } /* Submenu simples (itens filhos do menu principal) */ .submenu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--sup); border-top: 3px solid var(--primaria); border-radius: 0 0 var(--raio-card) var(--raio-card); box-shadow: var(--sombra-drop); padding: 8px; z-index: 45; display: none; } .nav-item:hover .submenu, .nav-item:focus-within .submenu { display: block; } .submenu a { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--texto-2); } .submenu a:hover { background: var(--sup-3); color: var(--primaria); } /* Catálogo dentro do menu compacto. No desktop não existe — quem mostra as categorias lá é o mega-menu. Só aparece dentro de .nav.aberto (ver a faixa do cabeçalho compacto, mais abaixo). */ .nav-cats { display: none; } .nav-subcats { display: none; } .nav-cat.aberta > .nav-subcats { display: block; } /* Busca */ /* Busca do topo: uma caixa só, com a lupa dentro separada por uma linha. O campo é estreito de propósito — ele divide a barra com o menu, e alargá-lo empurraria os itens da nav para fora. */ .busca-topo { display: flex; align-items: center; height: 44px; overflow: hidden; border: 1px solid var(--borda-2); border-radius: var(--raio-btn); background: var(--sup); } .busca-topo input { width: 125px; height: 100%; border: none; outline: none; background: transparent; padding: 0 12px; font-family: var(--fonte); font-size: 14px; color: var(--texto); } .busca-topo input::placeholder { color: var(--texto-3); } .busca-topo button { width: 40px; height: 100%; flex: 0 0 40px; border: none; border-left: 1px solid var(--borda-2); background: var(--sup); color: var(--primaria); font-size: 15px; cursor: pointer; } .busca-topo button:hover { background: var(--sup-3); } /* Foco visível na caixa inteira: o contorno do foi removido, e sem isto quem navega por teclado não sabe onde está. */ .busca-topo:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-18); } /* O botão-lupa só existe onde a caixa não cabe (ver regra em @media). */ .btn-busca { display: none; } /* Com o cabeçalho flutuando arredondado, o que abre por baixo dele (mega-menu e faixa de busca) precisa arredondar embaixo — senão sai um retângulo de quina viva pendurado numa barra de cantos redondos. */ .rolou .hdr .mega, .rolou .hdr .busca-faixa { border-radius: 0 0 16px 16px; overflow: hidden; } .busca-faixa { background: var(--sup-2); border-top: 1px solid var(--borda); display: none; } .busca-faixa.aberta { display: block; } .busca-faixa form { display: flex; gap: 10px; padding: 18px 0; } .busca-faixa input { flex: 1; padding: 14px 16px; border: 1px solid var(--borda-2); border-radius: var(--raio-btn); font-family: var(--fonte); font-size: 15px; background: var(--sup); color: var(--texto); } .busca-faixa input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-18); } /* ============================================================ MEGA MENU == */ .mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--sup); border-top: 1px solid var(--borda); box-shadow: var(--sombra-mega); z-index: 39; display: none; } .mega.aberto { display: block; } .mega-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr) 288px; padding: 26px 0; } .mega-rail { border-right: 1px solid var(--borda); padding-right: 18px; display: flex; flex-direction: column; gap: 2px; } .mega-tit { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--texto-3); padding: 4px 16px 12px; text-transform: uppercase; } .mega-cat { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 6px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--texto-2); font-family: var(--fonte); } .mega-cat i.ic { font-size: 23px; line-height: 1; color: var(--texto-3); } .mega-cat .seta-ind { margin-left: auto; font-size: 10px; color: var(--borda-2); } .mega-cat.on { background: var(--sup-3); color: var(--primaria); } .mega-cat.on i.ic, .mega-cat.on .seta-ind { color: var(--primaria); } .mega-painel { padding: 4px 30px; display: none; } .mega-painel.on { display: block; } .mega-painel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .mega-painel-cab .mega-painel-titulo { font-size: 17px; font-weight: 700; } .mega-painel-cab a { font-size: 13px; font-weight: 600; color: var(--primaria); white-space: nowrap; } .mega-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; } .mega-sub { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 6px; color: var(--texto-2); font-size: 13.5px; font-weight: 500; } .mega-sub:hover { background: var(--sup-3); color: var(--primaria); } .mega-sub .th { width: 38px; height: 38px; flex-shrink: 0; border-radius: 5px; background: var(--listra); background-size: cover; background-position: center; } .mega-fer { display: flex; flex-direction: column; gap: 12px; } .fer { display: flex; gap: 13px; align-items: center; background: var(--sup-2); border: 1px solid var(--borda); border-radius: var(--raio-card); padding: 15px; } .fer:hover { border-color: var(--primaria); } .fer .ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--raio-card); background: var(--primaria); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; } .fer-t { display: block; font-weight: 700; font-size: 14.5px; color: var(--texto); } .fer small { font-size: 12.5px; color: var(--texto-2); } /* ================================================================= HERO == */ .hero { position: relative; height: var(--h-hero); overflow: hidden; background: var(--escuro-1); } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; } .slide.on { opacity: 1; pointer-events: auto; } .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } /* Véu de legibilidade: escuro à esquerda, onde está o texto; transparente à direita, onde a foto ou o render precisam aparecer. */ .slide-veu { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(var(--escuro-1-rgb), .95) 0%, rgba(var(--escuro-1-rgb), .72) 42%, rgba(var(--escuro-1-rgb), .04) 100%); } .slide-render { position: absolute; right: 4%; bottom: 0; top: 9%; height: 82%; width: 44%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 24px 40px rgba(0,0,0,.4)); } .slide-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 680px; } /* Vale para h1 e h2: só o primeiro slide é h1 (um por página), e o título de todos precisa continuar com o mesmo desenho. */ .slide .slide-titulo { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; color: #fff; margin: 14px 0 16px; } .slide p { font-size: clamp(16px, 1.5vw, 19px); color: var(--sobre-escuro); margin: 0 0 28px; max-width: 56ch; } .slide-btns { display: flex; gap: 12px; flex-wrap: wrap; } .hero-ind { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3; display: flex; gap: 8px; } .hero-ind button { width: 46px; height: 4px; border: none; padding: 0; background: rgba(255,255,255,.3); cursor: pointer; border-radius: 2px; transition: background .25s; } .hero-ind button.on { background: #fff; } /* Setas do banner: vidro sobre a arte, como no layout. Ficam acima do véu e do render (z-index 6) — abaixo disso o clique cairia na imagem do produto. */ .hero-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 16px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .18s ease; } .hero-seta:hover { background: rgba(255,255,255,.26); } .hero-seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hero-seta.ant { left: 24px; } .hero-seta.prox { right: 24px; } /* Em tela estreita as setas cobririam o texto do banner, que é o que importa ali — a navegação fica com os indicadores e o arrasto. */ @media (max-width: 720px) { .hero-seta { display: none; } } /* =========================================================== SEGMENTOS == */ .segmentos { background: var(--sup); border-bottom: 1px solid var(--borda); padding: 34px 0; } .seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 14px; } .seg { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 16px 8px; border: 1px solid transparent; border-radius: var(--raio-card); text-align: center; transition: .18s; } .seg:hover { border-color: var(--primaria); box-shadow: var(--sombra-card); } .seg .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--sup-3); color: var(--primaria); display: flex; align-items: center; justify-content: center; font-size: 30px; } .seg span { font-size: 13.5px; font-weight: 600; color: var(--texto); line-height: 1.3; } /* =============================================================== LINHAS == */ .linhas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; } .linha-card { position: relative; height: 440px; border-radius: var(--raio-card); overflow: hidden; background: var(--escuro-1); display: flex; flex-direction: column; justify-content: flex-end; } /* A arte ocupa o cartão INTEIRO, proporcional e sem distorcer. `cover` preenche a caixa mantendo a proporção e corta o excesso — o que sobra fica fora, e nada é esticado. Antes era `contain` numa faixa de 62% com sombra projetada: tratamento de render de produto recortado, que numa FOTO deixava tarja do fundo do cartão em cima e embaixo. A sombra saiu junto: sobre uma imagem sangrada ela não tem o que projetar. */ .linha-card .arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s cubic-bezier(.2,.7,.2,1); } /* Véu de legibilidade. Ficou mais forte porque agora há FOTO atrás do texto até o topo: com o antigo "transparent até 34%", o kicker caía sobre a parte clara da imagem e sumia. O topo mantém só um tom leve, para a foto continuar aparecendo, e fecha antes do bloco de texto começar. */ .linha-card .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--escuro-1-rgb), 0) 0%, rgba(var(--escuro-1-rgb), .10) 38%, rgba(var(--escuro-1-rgb), .58) 56%, rgba(var(--escuro-1-rgb), .94) 78%, rgba(var(--escuro-1-rgb), 1) 100%); } .linha-card .txt { position: relative; padding: 28px; color: #fff; } /* Serve a h2 e h3: o mesmo cartão é h3 na home (sob o h2 da seção) e h2 em /produtos (logo abaixo do h1). O nível muda, o desenho não. */ .linha-card .linha-titulo { font-size: 25px; font-weight: 700; margin: 10px 0 8px; } .linha-card p { font-size: 14.5px; color: var(--sobre-escuro); margin: 0 0 16px; } .linha-card .ir { font-size: 14px; font-weight: 600; color: #fff; } /* Aproximação no hover, e não deslocamento: com a imagem sangrando até a borda, subir 6px descolaria o rodapé do cartão e mostraria o fundo. */ .linha-card:hover .arte { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .linha-card .arte { transition: none; } .linha-card:hover .arte { transform: none; } } /* Variante SEM foto do cartão de linha — a home usa esta; /produtos segue com o .linha-card fotográfico. Cartão claro com borda: o ícone da categoria num chip com a cor da marca faz o papel da imagem, e o hover acende a borda na primária — mesma linguagem dos .seg do topo da página. */ .linha-flat { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); transition: border-color .18s, box-shadow .18s; } .linha-flat .ic { width: 62px; height: 62px; border-radius: 14px; background: var(--primaria-05); color: var(--primaria); display: flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 20px; } .linha-flat .linha-titulo { font-size: 21px; font-weight: 700; margin: 8px 0 8px; color: var(--texto); } .linha-flat p { font-size: 14.5px; color: var(--texto-2); margin: 0 0 18px; } /* margin-top:auto encosta o link no rodapé: com descrições de tamanhos diferentes, o "Explorar linha" alinha entre os cartões da mesma fileira. */ .linha-flat .ir { font-size: 14px; font-weight: 600; color: var(--primaria); margin-top: auto; } .linha-flat:hover { border-color: var(--primaria); box-shadow: var(--sombra-card); } .linha-flat:hover .ir { text-decoration: underline; } /* Versão horizontal e compacta do cartão de linha — a chamada "Outras linhas" no fim da coluna lateral de produtos/SLUG. Mesma receita do .linha-card (foto sangrada + véu + texto), espremida numa régua baixa: só o nome em destaque e a contagem de produtos. */ .linha-mini { position: relative; display: flex; align-items: center; height: 76px; border-radius: var(--raio-card); overflow: hidden; background: var(--escuro-1); } .linha-mini .arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s cubic-bezier(.2,.7,.2,1); } /* Véu horizontal: o texto vive à esquerda, então é lá que o escuro pesa. */ .linha-mini .veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--escuro-1-rgb), .92) 0%, rgba(var(--escuro-1-rgb), .66) 55%, rgba(var(--escuro-1-rgb), .18) 100%); } .linha-mini .txt { position: relative; padding: 0 16px; color: #fff; min-width: 0; } .linha-mini .txt b { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linha-mini .txt small { font-size: 11.5px; color: var(--sobre-escuro); } .linha-mini:hover .arte { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .linha-mini .arte { transition: none; } .linha-mini:hover .arte { transform: none; } } /* ================================================== BLOCOS DE PRODUTOS == */ .carrossel-wrap { position: relative; } .carrossel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .carrossel::-webkit-scrollbar { display: none; } .setas { display: flex; gap: 8px; } /* ATENÇÃO: `.seta` é o BOTÃO redondo de navegação do carrossel — tem caixa, borda e fundo próprio. Setinha decorativa dentro de outro elemento usa `.seta-ind`; usar `.seta` a envolve num botão que não existe. */ .seta { width: 42px; height: 42px; border: 1px solid var(--borda-2); background: var(--sup); border-radius: var(--raio-btn); cursor: pointer; color: var(--primaria); font-size: 14px; display: flex; align-items: center; justify-content: center; } .seta:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); } .card-prod { flex: 0 0 300px; scroll-snap-align: start; border: 1px solid var(--borda); min-width: 0; border-radius: var(--raio-card); overflow: hidden; background: var(--sup); display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; } .card-prod:hover { box-shadow: var(--sombra-card); border-color: var(--borda-2); } /* A imagem preenche a moldura inteira, cortando o excedente em vez de flutuar no meio com margem. `cover` mantém a proporção — o que sai é sobra, nunca deformação. */ .card-prod .im { position: relative; height: 220px; background: var(--listra); display: block; overflow: hidden; } .card-prod .im img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; } .card-prod:hover .im img { transform: scale(1.045); } .card-prod .tag { position: absolute; top: 12px; left: 12px; background: var(--escuro-2); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 4px 9px; border-radius: 3px; text-transform: uppercase; } .card-prod .bd { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card-prod .cod { font-family: var(--mono); font-size: 12px; color: var(--primaria); font-weight: 500; } .card-prod .nm { font-size: 16px; font-weight: 600; line-height: 1.35; flex: 1; } .card-prod .tag-novo { position: absolute; top: 12px; right: 12px; background: var(--acento); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 3px; text-transform: uppercase; } /* Dois botões lado a lado. Abaixo de 340px de cartão eles empilham: "Informações" cortado ao meio não é um botão, é um erro. */ .card-prod .acoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .card-prod .acoes .btn { flex: 1 1 128px; padding: 11px 12px; font-size: 13px; white-space: nowrap; } .card-prod .acoes .btn i { font-size: 12px; } .card-prod .acoes .btn-largo { flex-basis: 100%; } /* No carrossel a largura é fracionária, não fixa: sempre 4 cartões INTEIROS por vista no desktop (a conta desconta os 3 gaps de 20px). Os 300px fixos somavam 1260px num container de ~1216px e cortavam o quarto cartão na borda direita. Em telas menores, 3 → 2 → 1 com uma espiada no próximo. */ .carrossel .card-prod { flex-basis: calc((100% - 60px) / 4); } @media (max-width: 1140px) { .carrossel .card-prod { flex-basis: calc((100% - 40px) / 3); } } @media (max-width: 860px) { .carrossel .card-prod { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 580px) { .carrossel .card-prod { flex-basis: 85%; } } /* Grade da página /segmentos: 4 por linha no desktop — cartões mais largos respiram melhor que o auto-fit de 230px, que espremia 5 na tela. */ /* Produtos do segmento agrupados por linha. O separador acima de cada grupo é o que faz a leitura funcionar: sem ele as grades se encostam e as dezesseis peças voltam a parecer uma lista só. */ .seg-linha + .seg-linha { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--borda); } .seg-linha-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .seg-linha-cab h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; margin: 0; } /* A contagem fica na pílula: dizer "6" ao lado do nome evita abrir a linha só para descobrir que ela tem seis itens. */ .seg-linha-cab h3 span { font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--sup-3); color: var(--primaria); } .seg-linha-cab a { font-size: 13.5px; font-weight: 600; color: var(--primaria); white-space: nowrap; } .seg-linha-cab a:hover { text-decoration: underline; } .seg-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .seg-lista { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .seg-lista { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .seg-lista { grid-template-columns: 1fr; } } /* Aba Instalação do produto: passos corridos — título e imagem em largura total da coluna; imagem menor que a coluna fica no tamanho natural, centralizada. */ .passo-inst { margin-bottom: 36px; } .passo-inst:last-child { margin-bottom: 0; } .passo-inst h3 { font-size: 18px; font-weight: 700; margin: 0 0 14px; } .passo-inst img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--raio-card); } /* Grade (catálogo) — mesmo cartão, sem o encaixe do carrossel */ .grade-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 20px; } .grade-prod .card-prod { flex: none; } /* Banner horizontal do rodapé do bloco */ .banner-bloco { margin-top: 30px; border-radius: var(--raio-card); overflow: hidden; position: relative; background: linear-gradient(100deg, var(--escuro-2), var(--primaria)); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 36px; flex-wrap: wrap; color: #fff; } .banner-bloco.com-foto::after { content: ''; position: absolute; inset: 0; background: rgba(var(--escuro-1-rgb), .72); } .banner-bloco > * { position: relative; z-index: 1; } .banner-bloco h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; margin: 8px 0 0; max-width: 46ch; } .banner-bloco p { font-size: 14.5px; color: var(--sobre-escuro); margin: 8px 0 0; max-width: 60ch; } /* ============================================================= NOTÍCIAS == */ .noticias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; } .card-not { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); overflow: hidden; display: flex; flex-direction: column; } .card-not:hover { box-shadow: var(--sombra-card); } .card-not .im { height: 200px; background: var(--listra); overflow: hidden; display: block; } .card-not .im img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; } .card-not:hover .im img { transform: scale(1.045); } .card-not .bd { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card-not .meta { font-family: var(--mono); font-size: 11.5px; color: var(--primaria); letter-spacing: .1em; text-transform: uppercase; } .card-not h3 { font-size: 18px; font-weight: 600; line-height: 1.35; } .card-not p { font-size: 14px; color: var(--texto-2); margin: 0; flex: 1; } .card-not .ir { font-size: 13.5px; font-weight: 600; color: var(--primaria); } /* ======================================================== INSTITUCIONAL == */ .inst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: start; } .inst p { color: var(--sobre-escuro); font-size: 16px; line-height: 1.7; margin: 16px 0 30px; max-width: 56ch; } .inst-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 32px; } .inst-stats .v { font-family: var(--mono); font-size: 38px; font-weight: 500; color: #fff; line-height: 1; } .inst-stats .l { font-size: 13px; color: var(--sobre-escuro-2); margin-top: 8px; max-width: 18ch; } .certs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; } .cert { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--raio-card); padding: 20px; } .cert .ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; margin-bottom: 12px; } .cert b { display: block; font-size: 15px; color: #fff; } .cert small { font-size: 12.5px; color: var(--sobre-escuro-2); line-height: 1.4; } /* ============================================================= CLIENTES == */ .clientes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; } .cliente { height: 92px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); display: flex; align-items: center; justify-content: center; padding: 18px; } /* Largura E altura explícitas, com object-fit cuidando da proporção. `width:auto` não serve aqui: SVG que traz só o viewBox — o formato em que vem a maioria das logomarcas — não tem tamanho intrínseco, a largura resolve em zero e a logo simplesmente não aparece. Com a caixa fixa e `contain`, cada marca ocupa o espaço que couber sem distorcer, seja SVG, PNG ou JPG. */ .cliente img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: grayscale(1); opacity: .72; transition: .2s; } .cliente:hover img { filter: none; opacity: 1; } .cliente span { font-size: 13px; color: var(--texto-3); font-weight: 600; text-align: center; } /* ================================================================== FAQ == */ .faq-lista { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); overflow: hidden; } .faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left; font-size: 16.5px; font-weight: 600; color: var(--texto); font-family: var(--fonte); } .faq-item .mais { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--sup-3); color: var(--primaria); display: flex; align-items: center; justify-content: center; font-size: 13px; } .faq-item .resp { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; } .faq-item.aberto .resp { max-height: 500px; padding: 0 22px 22px; } .faq-item .resp p { font-size: 15.5px; color: var(--texto-2); line-height: 1.65; margin: 0; } /* =============================================================== RODAPÉ == */ .rodape { background: var(--escuro-3); color: var(--sobre-escuro); padding: 56px 0 0; } .rodape-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; } .rodape h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 18px; font-weight: 700; } .rodape a:hover { color: #fff; } .rodape ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; } .rodape .marca img { height: 34px; width: auto; margin-bottom: 18px; } .rodape .marca p { font-size: 14px; line-height: 1.65; margin: 0 0 22px; max-width: 42ch; } .rodape .redes { display: flex; gap: 10px; } .rodape .redes a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 15px; } .rodape .redes a:hover { background: var(--primaria); color: #fff; } .rodape .contato { display: flex; flex-direction: column; gap: 14px; font-size: 14px; } .rodape .contato div { display: flex; gap: 11px; align-items: flex-start; } .rodape .contato i { color: var(--primaria); margin-top: 3px; font-size: 15px; } .rodape-fim { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; } .rodape-fim .legais { display: flex; gap: 22px; flex-wrap: wrap; } /* ============================================================ INTERNAS == */ .pag-hero { background: var(--escuro-1); color: #fff; padding: 60px 0; position: relative; overflow: hidden; } .pag-hero.com-foto::after { content: ''; position: absolute; inset: 0; background: rgba(var(--escuro-1-rgb), .8); } .pag-hero > * { position: relative; z-index: 1; } .pag-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin: 12px 0 0; } .pag-hero p { font-size: 17px; color: var(--sobre-escuro); margin: 14px 0 0; max-width: 66ch; } .migalhas { background: var(--sup-2); font-family: var(--mono); font-size: 13.5px; color: var(--texto-2); position: relative; z-index: 30; } .migalhas .wrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .migalhas a:hover { color: var(--primaria); } .migalhas .atual { color: var(--primaria); } .migalhas .sep { opacity: .45; } /* Migalha ramificada: o nível com seta abre a lista de irmãos, para trocar de categoria sem voltar duas telas. */ .mig-drop { position: relative; } .mig-drop > button { background: none; border: none; font-family: var(--mono); font-size: 13.5px; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; } .mig-drop-painel { position: absolute; top: calc(100% + 10px); left: 0; background: var(--sup); border-top: 3px solid var(--primaria); border-radius: 0 0 var(--raio-card) var(--raio-card); box-shadow: var(--sombra-drop); padding: 10px; min-width: 248px; z-index: 50; display: none; font-family: var(--fonte); } .mig-drop:hover .mig-drop-painel, .mig-drop:focus-within .mig-drop-painel { display: grid; } .mig-drop-painel.duas { grid-template-columns: 1fr 1fr; min-width: 430px; } .mig-drop-painel a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; font-size: 13.5px; color: var(--texto-2); } .mig-drop-painel a:hover { background: var(--sup-3); color: var(--primaria); } .mig-drop-painel a i { font-size: 18px; color: var(--primaria); } .prosa { font-size: 16px; line-height: 1.75; color: var(--texto-2); } .prosa h2 { font-size: 25px; color: var(--texto); margin: 34px 0 14px; } .prosa h3 { font-size: 20px; color: var(--texto); margin: 30px 0 12px; } .prosa p { margin: 0 0 16px; } .prosa ul, .prosa ol { margin: 0 0 18px; padding-left: 22px; } .prosa li { margin-bottom: 8px; } .prosa a { color: var(--primaria); font-weight: 600; } .prosa a:hover { text-decoration: underline; } .prosa img { border-radius: var(--raio-card); margin: 22px 0; } .prosa table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; } .prosa th, .prosa td { padding: 12px 14px; border-bottom: 1px solid var(--borda); text-align: left; } .prosa th { background: var(--sup-2); font-weight: 700; color: var(--texto); } .prosa blockquote { margin: 22px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--primaria); color: var(--texto); font-size: 17px; line-height: 1.65; } /* Classes que o editor do painel escreve no HTML. Sem estas regras, alinhar um parágrafo ou recuar uma lista no editor não teria efeito nenhum no site — e a pessoa ficaria achando que o botão está quebrado. */ .prosa .ql-align-center { text-align: center; } .prosa .ql-align-right { text-align: right; } .prosa .ql-align-justify{ text-align: justify; } .prosa .ql-indent-1 { padding-left: 3em; } .prosa .ql-indent-2 { padding-left: 6em; } .prosa .ql-indent-3 { padding-left: 9em; } /* ====================================================== PÁG. DO PRODUTO == */ .prod-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } .galeria { display: flex; gap: 16px; } /* Coluna de miniaturas: rola quando as fotos não cabem, com setas em cima e embaixo. A altura acompanha a da imagem principal para as duas terminarem na mesma linha. */ .thumbs-col { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; max-height: 480px; } .thumbs-seta { width: 78px; height: 26px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); color: var(--primaria); font-size: 11px; cursor: pointer; } .thumbs-seta:hover:not([disabled]) { background: var(--sup-3); border-color: var(--primaria); } .thumbs-seta[disabled] { opacity: .35; cursor: default; } .thumbs-seta[hidden] { display: none; } .galeria .thumbs { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; } .galeria .thumbs::-webkit-scrollbar { display: none; } /* flex:0 0 78px — sem isso as miniaturas ENCOLHEM para caber na altura da coluna em vez de transbordar, e aí não há o que rolar: oito fotos viravam oito tirinhas achatadas e as setas nunca apareciam. */ .galeria .thumbs button { flex: 0 0 78px; width: 78px; height: 78px; border: 1px solid var(--borda); background: var(--sup); border-radius: 6px; cursor: pointer; padding: 8px; } .galeria .thumbs button.on { border: 2px solid var(--primaria); } .galeria .thumbs img { width: 100%; height: 100%; object-fit: contain; } .galeria .principal { flex: 1; min-width: 0; max-height: 480px; aspect-ratio: 1/1; background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; padding: 7%; position: relative; } .galeria .principal img { width: 100%; height: 100%; object-fit: contain; } .galeria .principal .tag { position: absolute; top: 16px; left: 16px; background: var(--escuro-2); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; padding: 5px 10px; border-radius: 3px; } .galeria .principal .tag-novo { position: absolute; top: 16px; right: 16px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; } .btn-zoom { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda-2); background: var(--sup); color: var(--primaria); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: .18s; } .btn-zoom:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); } /* Lightbox da imagem principal */ .zoom-overlay { position: fixed; inset: 0; background: rgba(10,11,16,.92); z-index: 200; display: none; align-items: center; justify-content: center; padding: 5vw; cursor: zoom-out; } .zoom-overlay.on { display: flex; } .zoom-overlay img { max-width: 100%; max-height: 90vh; object-fit: contain; } .zoom-fechar { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .zoom-fechar:hover { background: rgba(255,255,255,.18); } .zoom-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .16s; } .zoom-seta:hover { background: rgba(255,255,255,.18); } .zoom-seta.ant { left: 18px; } .zoom-seta.prox { right: 18px; } .zoom-contador { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px; cursor: default; } @media (max-width: 700px) { .zoom-seta { width: 40px; height: 40px; font-size: 16px; } .zoom-seta.ant { left: 8px; } .zoom-seta.prox { right: 8px; } } /* Embed do Desenho 3D — o link abre POR CIMA da página, num iframe que toma a tela inteira menos 50px de respiro, com duas saídas só: nova aba e fechar. */ .embed-overlay { position: fixed; inset: 0; background: rgba(10,11,16,.78); z-index: 210; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .embed-overlay.on { display: flex; } .embed-caixa { width: calc(100vw - 50px); height: calc(100vh - 50px); background: var(--sup); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); } .embed-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 10px 0 18px; height: 48px; flex-shrink: 0; border-bottom: 1px solid var(--borda); background: var(--sup); } .embed-marca { display: flex; align-items: center; gap: 10px; min-width: 0; } .embed-marca img { height: 20px; width: auto; flex-shrink: 0; } .embed-marca .nm { font-size: 14px; font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .embed-marca .sep { color: var(--texto-3); flex-shrink: 0; } .embed-marca strong { font-size: 14px; font-weight: 500; color: var(--texto-2); white-space: nowrap; flex-shrink: 0; } .embed-acoes { display: flex; gap: 4px; } .embed-acoes a, .embed-acoes button { width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; color: var(--texto-2); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; } .embed-acoes a:hover, .embed-acoes button:hover { background: var(--sup-3); color: var(--primaria); } /* O corpo é a janela; o iframe, o papel atrás dela. Com --corte > 0 o iframe cresce e sobe, e a faixa cortada (a barra do site embutido) fica fora da vista sem tocar no DOM dele — que é de outro domínio e não aceita CSS nosso. */ .embed-corpo { flex: 1; position: relative; overflow: hidden; background: #fff; } .embed-corpo iframe { position: absolute; left: 0; width: 100%; border: 0; background: #fff; top: calc(-1 * var(--corte, 0px)); height: calc(100% + var(--corte, 0px)); } @media (max-width: 700px) { .embed-caixa { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 10px; } } /* Compartilhar */ .prod-share { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--borda); flex-wrap: wrap; } .prod-share span { font-size: 12.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; } .prod-share a, .prod-share button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--sup); color: var(--texto-2); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: .16s; } .prod-share a:hover, .prod-share button:hover { border-color: var(--primaria); color: var(--primaria); } /* ---- Compre junto ---- */ .junto { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; align-items: center; } .junto-itens { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .junto-mais { color: var(--texto-3); font-size: 13px; flex: 0 0 auto; } .junto-item { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); cursor: pointer; flex: 1 1 210px; min-width: 0; transition: .16s; } .junto-item:hover { border-color: var(--primaria); } .junto-item.fixo { cursor: default; background: var(--sup-3); } .junto-item input { accent-color: var(--primaria); width: 17px; height: 17px; flex: 0 0 auto; } /* Fundo branco, pelo mesmo motivo do carrinho em /orcamento: a listra é o marcador de "sem imagem" das grades do catálogo, mas aqui a foto sempre existe — e como ela é um render de fundo transparente exibido com `contain`, a listra aparecia por trás da peça e virava ruído. */ .junto-item .im { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 6px; background: var(--sup); overflow: hidden; display: flex; } .junto-item .im img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .junto-item .tx { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); } .junto-item .tx b { display: block; font-family: var(--mono); font-size: 11px; color: var(--primaria); margin-bottom: 3px; } .junto-acao { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-card); padding: 20px; text-align: center; } .junto-acao .junto-conta { font-size: 13.5px; color: var(--texto-2); margin-bottom: 12px; } .junto-acao .junto-conta b { font-family: var(--mono); font-size: 20px; color: var(--primaria); display: block; } .junto-acao small { display: block; font-size: 12px; color: var(--texto-3); margin-top: 10px; line-height: 1.5; } /* Tabela que rola sozinha em vez de estourar a página. O min-width garante que as colunas não virem uma coluna só de palavras quebradas; quem faz a tabela caber é o scroll do contêiner, não o texto. */ .tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .tabela-rolavel table { min-width: 420px; } .prod-info .cod { font-family: var(--mono); font-size: 13px; color: var(--primaria); letter-spacing: .06em; text-transform: uppercase; } .prod-info h1 { font-size: clamp(25px, 3vw, 34px); font-weight: 700; margin: 12px 0 14px; } .prod-info .resumo { font-size: 16px; color: var(--texto-2); line-height: 1.65; margin: 0 0 22px; } .selos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; } .selo { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; background: var(--sup-3); color: var(--primaria); font-size: 12.5px; font-weight: 600; } /* Estilo "verde claro" do selo — estado positivo (estoque, garantia), como no layout de referência. Cores fixas de propósito: verde de "ok" é semântico e não muda de marca para marca. */ .selo.selo-verde { background: #eef9f1; color: #1d7a45; } .qspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; } .qspec { border: 1px solid var(--borda); border-radius: var(--raio-card); padding: 14px 16px; display: flex; gap: 12px; align-items: center; } .qspec > i { font-size: 24px; color: var(--primaria); flex: 0 0 auto; } .qspec .r { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 700; } .qspec .v { font-family: var(--mono); font-size: 15px; color: var(--texto); margin-top: 4px; } /* A grade das abas + coluna de ajuda. Estava só em