quanto em . */ background-image: var(--dc-hero-bg, none) !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 1s ease !important; } .dc-shortcode-scope a.dc-home2-hero-slide { cursor: pointer !important; } .dc-shortcode-scope .dc-home2-hero-slide.is-active { opacity: 1 !important; z-index: 1 !important; pointer-events: auto !important; } .dc-shortcode-scope .dc-home2-hero-link-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; cursor: pointer !important; } .dc-shortcode-scope .dc-home2-hero-arrow { position: absolute !important; top: 50% !important; z-index: 3 !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important; background: rgba(15, 23, 42, .45) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background .15s ease !important; padding: 0 !important; } .dc-shortcode-scope .dc-home2-hero-arrow:hover { background: rgba(15, 23, 42, .7) !important; } .dc-shortcode-scope .dc-home2-hero-arrow svg { width: 20px !important; height: 20px !important; } .dc-shortcode-scope .dc-home2-hero-arrow-prev { left: 16px !important; } .dc-shortcode-scope .dc-home2-hero-arrow-next { right: 16px !important; } .dc-shortcode-scope .dc-home2-hero-dots { position: absolute !important; z-index: 3 !important; left: 50% !important; bottom: 116px !important; transform: translateX(-50%) !important; display: flex !important; gap: 7px !important; } .dc-shortcode-scope .dc-home2-hero-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .4) !important; transition: background .2s ease, transform .2s ease !important; } .dc-shortcode-scope .dc-home2-hero-dot.is-active { background: #fff !important; transform: scale(1.3) !important; } @media (max-width: 640px) { .dc-shortcode-scope .dc-home2-hero-dots { bottom: 100px !important; } } /* ---------------- Busca flutuante (sobrepõe o hero) ---------------- */ .dc-shortcode-scope .dc-home2-search-float { position: relative !important; z-index: 2 !important; max-width: 880px !important; margin: -84px auto 0 !important; padding: 0 20px !important; } .dc-shortcode-scope .dc-home2-search-float .dc-busca-shortcode { box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important; } /* ---------------- Container / seções ---------------- */ .dc-shortcode-scope .dc-home2-container { max-width: 1280px !important; margin: 0 auto !important; padding: 44px 20px 60px !important; } .dc-shortcode-scope .dc-home2-section { margin: 0 0 40px !important; /* OBS: "content-visibility: auto" foi removido daqui de propósito. Apesar de acelerar o carregamento inicial, essa propriedade ativa automaticamente "contain: paint" na seção — mesmo quando ela está visível na tela — e isso corta (clipa) qualquer conteúdo que ultrapasse a caixa do elemento, incluindo o box-shadow (:hover) dos cards de veículos, categorias e lojas nas laterais. Era exatamente isso que fazia a sombra "sumir" à esquerda/direita dos cards. */ } .dc-shortcode-scope .dc-home2-title { margin: 0 0 18px !important; text-align: left !important; font-size: 18px !important; font-weight: 600 !important; color: var(--dc-text) !important; } /* ---------------- Promo (Anuncie / Encontre) ---------------- */ .dc-shortcode-scope .dc-home2-promo-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; margin: 0 0 40px !important; } .dc-shortcode-scope .dc-home2-promo { position: relative !important; display: flex !important; align-items: flex-end !important; min-height: 220px !important; border-radius: 14px !important; overflow: hidden !important; background-image: linear-gradient(135deg, #1e293b, #0f172a); background-size: cover !important; background-position: center !important; text-decoration: none !important; transition: transform .2s ease !important; } .dc-shortcode-scope .dc-home2-promo:hover { transform: translateY(-3px) !important; } .dc-shortcode-scope .dc-home2-promo-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .15) 65%, rgba(0, 0, 0, .35) 100%) !important; } .dc-shortcode-scope .dc-home2-promo-text { position: relative !important; z-index: 1 !important; padding: 24px !important; display: block !important; } .dc-shortcode-scope .dc-home2-promo-title { display: block !important; color: #fff !important; font-size: 22px !important; font-weight: 800 !important; margin: 0 0 8px !important; } .dc-shortcode-scope .dc-home2-promo-desc { display: block !important; color: rgba(255, 255, 255, .82) !important; font-size: 13.5px !important; line-height: 1.5 !important; max-width: 380px !important; } /* ---------------- Banner "Anuncie aqui" ---------------- */ .dc-shortcode-scope .dc-home2-ad-banner { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 140px !important; border-radius: 14px !important; overflow: hidden !important; background: linear-gradient(100deg, var(--dc-primary), var(--dc-blue-dark)) !important; text-decoration: none !important; margin: 0 0 40px !important; transition: transform .2s ease !important; } .dc-shortcode-scope .dc-home2-ad-banner:hover { transform: translateY(-2px) !important; } .dc-shortcode-scope .dc-home2-ad-stripes { position: absolute !important; inset: 0 !important; background-image: repeating-linear-gradient(58deg, rgba(255, 255, 255, .12) 0 4px, transparent 4px 16px) !important; pointer-events: none !important; } .dc-shortcode-scope .dc-home2-ad-text { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; color: #fff !important; font-size: 26px !important; font-weight: 900 !important; letter-spacing: .03em !important; text-align: center !important; } .dc-shortcode-scope .dc-home2-ad-cta { display: inline-flex !important; padding: 8px 20px !important; border-radius: 999px !important; background: #fff !important; color: var(--dc-primary) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: normal !important; text-transform: none !important; } /* ---------------- Categorias ---------------- */ .dc-shortcode-scope .dc-home2-categorias { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 16px !important; } .dc-shortcode-scope .dc-home2-categoria { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 22px 16px !important; border: 1px solid var(--dc-border) !important; border-radius: 14px !important; background: var(--dc-bg) !important; background-color: var(--dc-bg) !important; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important; } .dc-shortcode-scope .dc-home2-categoria:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, .1) !important; transform: translateY(-3px) !important; } .dc-shortcode-scope .dc-home2-categoria img { width: 100% !important; max-width: 120px !important; height: 70px !important; object-fit: contain !important; display: block !important; } .dc-shortcode-scope .dc-home2-categoria span { font-size: 13.5px !important; font-weight: 700 !important; color: var(--dc-text) !important; } /* No mobile, a lista de categorias vira um carrossel horizontal com scroll por toque (swipe), em vez de empilhar/quebrar linha. Cada card ganha uma largura fixa e "gruda" no scroll (scroll-snap) pra ficar suave de arrastar com o dedo. */ @media (max-width: 640px) { .dc-shortcode-scope .dc-home2-categorias { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; scroll-padding-left: 0.8rem !important; gap: 12px !important; margin: 0 -0.8rem !important; /* padding-left precisa ser EXATAMENTE igual ao valor absoluto do margin negativo (0.8rem, mesmo gutter de .dc-home2-container no mobile) pra cancelar o deslocamento e o primeiro card ficar rente com o título "Categorias" (que não tem padding/margin extra). Botar um valor diferente daqui empurra o card pra direita/esquerda do título — foi esse o erro da correção anterior. */ padding: 16px 0.8rem 16px 0.8rem !important; /* Esconde a barra de scroll (o gesto de arrastar continua ativo). */ scrollbar-width: none !important; -ms-overflow-style: none !important; } .dc-shortcode-scope .dc-home2-categorias::-webkit-scrollbar { display: none !important; } .dc-shortcode-scope .dc-home2-categoria { flex: 0 0 auto !important; width: 148px !important; scroll-snap-align: start !important; padding: 18px 14px !important; } } /* ---------------- Responsivo ---------------- */ @media (max-width: 640px) { .dc-shortcode-scope .dc-home2-hero:not(.dc-home2-hero-has-photo) { min-height: 260px !important; padding: 34px 0.8rem 80px !important; } .dc-shortcode-scope .dc-home2-hero.dc-home2-hero-has-photo { padding: 34px 0.8rem 80px !important; /* No desktop a altura do Hero segue a proporção real da foto (aspect-ratio, definido inline pelo PHP/JS). No mobile isso faz a altura ficar minúscula, porque a foto do Hero costuma ser bem larga (banner tipo 21:9 ou mais) — numa tela de 375px, uma foto 21:9 dá ~160px de altura. Por isso, aqui a gente ignora a proporção da foto (que não tem !important, então perde pra essa regra) e usa uma altura fixa e confortável para o hero, com a foto preenchendo via "cover" (já definido mais acima), cortando as bordas em vez de espremer a seção. O clamp() escala um pouco com a largura da tela (min 300px, máx 420px), pra caber bem tanto num celular pequeno quanto num maior. */ aspect-ratio: unset !important; min-height: clamp(220px, 58vw, 320px) !important; } .dc-shortcode-scope .dc-home2-search-float { margin-top: -54px !important; padding: 0 0.8rem !important; } .dc-shortcode-scope .dc-home2-container { padding-left: 0.8rem !important; padding-right: 0.8rem !important; } .dc-shortcode-scope .dc-home2-ad-text { font-size: 20px !important; } }