/* =====================================================
GRÁFICA DAS ELEIÇÕES — style.css
Fonte: Google Fonts (Bebas Neue + Barlow + Barlow Condensed)
Importação está no do index.html
===================================================== */
/* ── VARIÁVEIS ── */
:root {
--verde: #29a542;
--verde-dark: #1e8a34;
--azul: #0a72b8;
--azul-escuro: #2d406f;
--amarelo: #eedf19;
--preto: #0d0e10;
--branco: #ffffff;
--cinza-claro: #f4f5f7;
--cinza-medio: #e8eaed;
--cinza-texto: #5a6070;
--borda: #e2e5ea;
--sombra: 0 2px 24px rgba(13,14,16,0.08);
--sombra-lg: 0 8px 48px rgba(13,14,16,0.13);
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Barlow', sans-serif;
background: var(--branco);
color: var(--preto);
overflow-x: hidden;
}
/* =====================================================
NAVBAR
===================================================== */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 56px;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--borda);
box-shadow: 0 1px 16px rgba(13,14,16,0.06);
}
.nav-logo svg { height: 42px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--preto);
text-decoration: none;
transition: color .2s;
}
.nav-links a:hover { color: var(--verde); }
.nav-cta {
background: var(--verde) !important;
color: #fff !important;
padding: 10px 22px;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(41,165,66,0.25);
transition: background .2s, transform .2s !important;
}
.nav-cta:hover { background: var(--verde-dark) !important; transform: translateY(-1px); }
/* =====================================================
HERO
===================================================== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 130px 56px 90px;
position: relative;
overflow: hidden;
background: var(--branco);
}
/* gradientes suaves de fundo */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 75% 45%, rgba(10,114,184,0.07) 0%, transparent 65%),
radial-gradient(ellipse 50% 70% at 15% 85%, rgba(41,165,66,0.06) 0%, transparent 55%),
radial-gradient(ellipse 45% 40% at 85% 10%, rgba(238,223,25,0.12) 0%, transparent 50%);
pointer-events: none;
}
/* marca d'água "2026" */
.hero::after {
content: '2026';
position: absolute;
right: -30px;
bottom: -60px;
font-family: 'Bebas Neue', sans-serif;
font-size: 340px;
line-height: 1;
color: rgba(13,14,16,0.04);
pointer-events: none;
user-select: none;
}
/* grid de pontos animado */
.hero-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(13,14,16,0.09) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
animation: dotsDrift 22s linear infinite;
opacity: 0.6;
}
@keyframes dotsDrift {
from { background-position: 0 0; }
to { background-position: 36px 36px; }
}
/* ── HERO BANNER DE IMAGEM (lado direito) ─────────────
Coloque sua imagem no src abaixo.
A imagem vai ocupar a metade direita do hero.
──────────────────────────────────────────────────── */
.hero-banner-img {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 48%;
overflow: hidden;
z-index: 0;
}
.hero-banner-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* gradiente que funde a imagem com o fundo branco à esquerda */
.hero-banner-img::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--branco) 0%, transparent 35%);
z-index: 1;
}
/* overlay escurecido leve sobre a imagem */
.hero-banner-img::after {
content: '';
position: absolute;
inset: 0;
background: rgba(13,14,16,0.18);
z-index: 1;
}
/* placeholder visual quando não há imagem */
.hero-banner-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--cinza-claro) 0%, var(--cinza-medio) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.hero-banner-placeholder svg { width: 64px; height: 64px; fill: rgba(13,14,16,0.15); }
.hero-banner-placeholder p {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(13,14,16,0.25);
text-align: center;
max-width: 180px;
}
.hero-content { position: relative; z-index: 1; max-width: 600px; }
/* pílula de tag */
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(41,165,66,0.09);
border: 1px solid rgba(41,165,66,0.3);
border-radius: 100px;
padding: 6px 18px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--verde);
margin-bottom: 28px;
animation: fadeUp .6s ease both;
}
.hero-tag span {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--verde);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .4; transform: scale(1.5); }
}
/* título principal */
.hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(56px, 7.5vw, 108px);
line-height: .93;
letter-spacing: 1.5px;
color: var(--preto);
margin-bottom: 10px;
animation: fadeUp .6s .1s ease both;
}
.hero h1 .accent { color: var(--verde); }
.hero h1 .outline { -webkit-text-stroke: 0.5px var(--azul); color: transparent; }
/* subtítulo */
.hero-sub {
font-size: clamp(16px, 1.8vw, 19px);
font-weight: 400;
line-height: 1.65;
color: var(--cinza-texto);
max-width: 460px;
margin-bottom: 44px;
animation: fadeUp .6s .2s ease both;
}
.hero-sub strong { color: var(--preto); font-weight: 700; }
/* botões hero */
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
animation: fadeUp .6s .3s ease both;
}
/* cards flutuantes */
.hero-visual {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
flex-direction: column;
gap: 16px;
animation: fadeUp .7s .4s ease both;
}
.hero-card {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: 16px;
padding: 20px 24px;
width: 230px;
box-shadow: var(--sombra-lg);
}
.hero-card:nth-child(2) { transform: translateX(24px); }
.hc-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.hc-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cinza-texto); margin-bottom: 4px; }
.hc-value { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: var(--preto); }
/* estatísticas no rodapé do hero */
.hero-stats {
position: absolute;
left: 56px; bottom: 52px;
display: flex;
gap: 40px;
z-index: 1;
animation: fadeUp .6s .5s ease both;
}
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 44px; line-height: 1; color: var(--preto); }
.stat-num span { color: var(--verde); }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cinza-texto); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* =====================================================
BOTÕES GLOBAIS
===================================================== */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--verde);
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 15px 34px;
border-radius: 8px;
text-decoration: none;
transition: background .25s, transform .25s, box-shadow .25s;
box-shadow: 0 4px 24px rgba(41,165,66,0.3);
}
.btn-primary:hover {
background: var(--verde-dark);
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(41,165,66,0.4);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid var(--borda);
color: var(--preto);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 15px 34px;
border-radius: 8px;
text-decoration: none;
background: transparent;
transition: border-color .25s, color .25s, transform .25s;
}
.btn-secondary:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.icon-wa { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
/* =====================================================
MARQUEE (faixa deslizante)
===================================================== */
.marquee-wrap { background: var(--preto); padding: 13px 0; overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; animation: marquee 20s linear infinite; }
.marquee-item {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 3px;
color: rgba(255,255,255,0.75);
padding: 0 24px;
display: inline-flex;
align-items: center;
gap: 18px;
}
.marquee-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amarelo); opacity: .7; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* =====================================================
SEÇÕES — BASE
===================================================== */
section { padding: 96px 56px; }
.section-eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--verde);
margin-bottom: 14px;
}
.section-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--verde); }
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(36px, 4.5vw, 62px);
line-height: 1;
letter-spacing: 1px;
color: var(--preto);
margin-bottom: 16px;
}
.section-title em { font-style: normal; color: var(--azul); }
/* =====================================================
SOBRE A EMPRESA
===================================================== */
#sobre { background: var(--cinza-claro); }
.sobre-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
margin-top: 8px;
}
.sobre-img-wrap { position: relative; }
/* ── IMAGEM DA EMPRESA ─────────────────────────────────
Substitua o conteúdo de .sobre-img-placeholder
por uma tag ![]()
apontando para sua foto:
E use este CSS para estilizar:
.sobre-img-real { width:100%; aspect-ratio:4/3;
object-fit:cover; border-radius:20px; z-index:1;
position:relative; }
──────────────────────────────────────────────────── */
.sobre-img-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: var(--cinza-medio);
border-radius: 20px;
border: 2px dashed rgba(13,14,16,0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
position: relative;
z-index: 1;
transition: border-color .3s;
}
.sobre-img-placeholder:hover { border-color: var(--azul); }
.sobre-img-placeholder svg { width: 52px; height: 52px; fill: rgba(13,14,16,0.2); }
.sobre-img-placeholder p {
font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: rgba(13,14,16,0.3);
text-align: center; padding: 0 24px;
}
/* CSS para quando você adicionar a imagem real */
.sobre-img-real {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 20px;
position: relative;
z-index: 1;
display: block;
}
/* sombra colorida atrás da imagem */
.sobre-img-wrap::before {
content: '';
position: absolute;
top: 16px; left: 16px; right: -16px; bottom: -16px;
border-radius: 20px;
background: linear-gradient(135deg, var(--azul) 0%, var(--verde) 100%);
opacity: 0.13;
z-index: 0;
}
.sobre-badge {
position: absolute;
bottom: -16px; right: -16px;
z-index: 2;
background: var(--verde);
color: #fff;
border-radius: 14px;
padding: 14px 20px;
text-align: center;
box-shadow: var(--sombra-lg);
}
.sobre-badge-num { font-family: 'Bebas Neue', sans-serif; font-size: 38px; line-height: 1; }
.sobre-badge-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
.sobre-desc { font-size: 16px; line-height: 1.75; color: var(--cinza-texto); margin-bottom: 16px; }
.sobre-desc strong { color: var(--preto); }
.sobre-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.sobre-lista li {
display: flex; align-items: center; gap: 12px;
font-size: 15px; font-weight: 600; color: var(--preto);
}
.sobre-lista li::before {
content: '';
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
background: rgba(41,165,66,0.12)
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2329a542' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")
center / 14px no-repeat;
}
/* =====================================================
PRODUTOS
===================================================== */
#produtos { background: var(--branco); padding-top: 80px; }
.produtos-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.produtos-desc { color: var(--cinza-texto); font-size: 16px; line-height: 1.65; margin-top: 8px; }
/* ── BANNERS DE SUBCATEGORIA ── */
.subcategory-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 28px;
}
.sub-banner {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 176px;
display: flex;
align-items: flex-end;
text-decoration: none;
transition: transform .3s, box-shadow .3s;
box-shadow: var(--sombra);
}
.sub-banner:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.sub-banner-bg { position: absolute; inset: 0; transition: transform .4s; }
.sub-banner:hover .sub-banner-bg { transform: scale(1.04); }
.sub-banner-1 .sub-banner-bg { background: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul) 100%); }
.sub-banner-2 .sub-banner-bg { background: linear-gradient(135deg, #14420e 0%, var(--verde) 100%); }
.sub-banner::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 22px 22px;
}
.sub-shape1 { position: absolute; top:-20px; right:-20px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.07); z-index:1; }
.sub-shape2 { position: absolute; bottom:-40px; right:60px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,0.05); z-index:1; }
.sub-banner-icon {
position: absolute; top:20px; right:22px; z-index:2;
width:46px; height:46px; border-radius:12px;
background:rgba(255,255,255,0.15);
display:flex; align-items:center; justify-content:center;
}
.sub-banner-icon svg { width:22px; height:22px; fill:rgba(255,255,255,0.9); }
.sub-banner-content { position:relative; z-index:2; padding:22px 26px; width:100%; }
.sub-banner-eyebrow { font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:5px; }
.sub-banner-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; color:#fff; line-height:1; margin-bottom:10px; }
.sub-banner-cta { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.75); transition:color .2s; }
.sub-banner:hover .sub-banner-cta { color:#fff; }
.sub-banner-cta svg { width:13px; height:13px; fill:currentColor; }
/* ── GRID DE PRODUTOS ── */
.produtos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 28px;
}
.produto-card {
border-radius: 16px;
overflow: hidden;
background: var(--branco);
border: 1px solid var(--borda);
box-shadow: var(--sombra);
transition: transform .3s, box-shadow .3s;
display: flex;
flex-direction: column;
}
.produto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
/* ── IMAGEM DO PRODUTO ────────────────────────────────
Para adicionar imagem real ao produto, substitua
o conteúdo de .produto-img pela tag abaixo:
Ou deixe assim para usar como placeholder.
──────────────────────────────────────────────────── */
.produto-img {
aspect-ratio: 4/3;
background: var(--cinza-claro);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* imagem real — basta colocar dentro de .produto-img */
.produto-img-real {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .4s;
}
.produto-card:hover .produto-img-real { transform: scale(1.06); }
/* placeholder (ícone + texto quando não há foto) */
.produto-img-inner { display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform .3s; }
.produto-card:hover .produto-img-inner { transform: scale(1.05); }
.produto-img svg { width:44px; height:44px; fill:rgba(13,14,16,0.2); }
.produto-img-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(13,14,16,0.28); }
.produto-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.produto-tag {
display:inline-block;
background:rgba(10,114,184,0.1); color:var(--azul);
font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
padding:4px 10px; border-radius:4px; align-self:flex-start;
}
.produto-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; color:var(--preto); line-height:1.15; }
.produto-cta {
display:inline-flex; align-items:center; gap:7px;
margin-top:auto; padding-top:12px; border-top:1px solid var(--borda);
font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
color:var(--verde); text-decoration:none;
transition:gap .2s, color .2s;
}
.produto-cta:hover { color:var(--verde-dark); gap:12px; }
.produto-cta svg { width:14px; height:14px; fill:currentColor; }
/* =====================================================
DIFERENCIAIS
===================================================== */
#diferenciais { background: var(--cinza-claro); }
.dif-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 52px;
}
.dif-card {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: 16px;
padding: 32px 28px;
box-shadow: var(--sombra);
transition: transform .3s, box-shadow .3s;
position: relative;
overflow: hidden;
}
.dif-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.dif-card::after {
content: ''; position: absolute; bottom:0; left:0; right:0; height:3px;
background: linear-gradient(90deg, var(--verde), var(--azul));
transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.dif-card:hover::after { transform: scaleX(1); }
.dif-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.dif-icon svg { width:24px; height:24px; }
.dif-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; color:var(--preto); margin-bottom:10px; }
.dif-desc { color:var(--cinza-texto); font-size:14px; line-height:1.7; }
/* =====================================================
CTA BAND (chamada final)
===================================================== */
.cta-band {
background: var(--preto);
padding: 96px 56px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: ''; position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(41,165,66,0.18) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 20% 0%, rgba(10,114,184,0.15) 0%, transparent 50%);
pointer-events: none;
}
.cta-band::after {
content: ''; position:absolute; inset:0;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 30px 30px; pointer-events:none;
}
.cta-band h2 {
font-family:'Bebas Neue',sans-serif;
font-size:clamp(44px,6vw,80px);
line-height:1; letter-spacing:2px; color:var(--branco);
margin-bottom:16px; position:relative; z-index:1;
}
.cta-band h2 em { font-style:normal; color:var(--amarelo); }
.cta-band p { font-size:18px; color:rgba(255,255,255,0.65); margin-bottom:44px; position:relative; z-index:1; }
.cta-band .btn-primary { font-size:18px; padding:18px 48px; position:relative; z-index:1; }
/* =====================================================
FOOTER
===================================================== */
footer {
background: #000;
padding: 40px 56px;
display: flex; justify-content:space-between; align-items:center;
border-top: 1px solid rgba(255,255,255,0.07);
flex-wrap: wrap; gap: 20px;
}
.foot-logo img {
height: 40px; /* ajuste aqui */
width: auto;
}
/* =====================================================
WHATSAPP FLUTUANTE
===================================================== */
.wa-float {
position: fixed;
bottom: 28px; right: 28px;
z-index: 300;
display: flex; align-items:center; gap:10px;
background: #25D366;
color: #fff;
font-family:'Barlow Condensed',sans-serif;
font-weight:800; font-size:15px; letter-spacing:1px; text-transform:uppercase;
padding: 13px 24px 13px 18px;
border-radius: 60px;
text-decoration: none;
box-shadow: 0 4px 28px rgba(37,211,102,0.4);
animation: waIn .6s .8s ease both, waPulse 3.5s 2s ease-in-out infinite;
transition: transform .25s, box-shadow .25s;
}
.wa-float:hover { transform:scale(1.05); box-shadow:0 8px 40px rgba(37,211,102,0.55); }
.wa-float svg { width:24px; height:24px; fill:#fff; }
@keyframes waIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes waPulse {
0%,100% { box-shadow: 0 4px 28px rgba(37,211,102,0.4); }
50% { box-shadow: 0 4px 40px rgba(37,211,102,0.65), 0 0 0 8px rgba(37,211,102,0.08); }
}
/* =====================================================
RESPONSIVO
===================================================== */
@media (max-width: 1100px) {
.dif-grid { grid-template-columns: repeat(2,1fr); }
.produtos-grid { grid-template-columns: repeat(2,1fr); }
.hero-visual { display: none; }
.hero-banner-img { width: 40%; }
}
@media (max-width: 768px) {
nav { padding: 12px 20px; }
.nav-links { display: none; }
section, #sobre, #produtos, .cta-band { padding: 64px 20px; }
.hero { padding: 110px 20px 120px; }
.hero-stats { left: 20px; bottom: 40px; gap: 28px; }
.hero::after { font-size: 180px; }
.hero-banner-img { display: none; }
.sobre-grid { grid-template-columns: 1fr; gap: 40px; }
.sobre-badge { right: 0; }
.subcategory-wrap { grid-template-columns: 1fr; }
.produtos-grid { grid-template-columns: 1fr; }
.dif-grid { grid-template-columns: 1fr; }
footer { padding: 32px 20px; flex-direction: column; align-items: flex-start; }
.wa-float span { display: none; }
.wa-float { padding: 14px; border-radius: 50%; }
}