/* ============================================================ Electo Maciel Construtora — camada visual "industrial confiante" Reaproveita a paleta já existente (--primary-color slate escuro + --secondary-color laranja) definida em style-base.css. Carregado por último no , então vence por ordem de origem sem precisar de !important na maioria das regras. ============================================================ */ /* ---- Contraste base: parágrafo cinza-claro demais no fundo claro ---- */ p { color: #494f57; } /* ---- HERO / BANNER DE PÁGINA ---- Reaproveita as classes .bread.bread--default (mantém as setas do breadcrumb já estilizadas) e soma .page-hero por cima, que tem mais especificidade e vence a regra antiga de background. */ .bread.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: 7.5rem 0 4rem; margin-bottom: 0; background: linear-gradient(125deg, rgba(20, 25, 31, 0.94) 0%, rgba(33, 40, 48, 0.9) 48%, rgba(184, 77, 19, 0.82) 150%), url("../imagens/breadcumb.webp") center 35% / cover no-repeat; } .page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 10px; background: repeating-linear-gradient( 115deg, var(--secondary-color) 0 26px, var(--secondary-color-dark) 26px 52px ); } .page-hero__icon { position: absolute; right: -1.25rem; bottom: -2.5rem; font-size: 14rem; line-height: 1; color: #fff; opacity: 0.08; transform: rotate(-10deg); pointer-events: none; z-index: 0; } .page-hero .container { position: relative; z-index: 1; } .page-hero__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--secondary-color-dark); color: #fff; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1rem; box-shadow: 0 6px 16px -6px rgba(184, 77, 19, 0.65); animation: heroFadeUp 0.5s ease both; } .page-hero .bread__title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.15; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4); max-width: 42rem; animation: heroFadeUp 0.6s 0.05s ease both; } .page-hero #breadcrumb, .page-hero #breadcrumb a { color: rgba(255, 255, 255, 0.8); animation: heroFadeUp 0.5s ease both; } .page-hero #breadcrumb a:hover { color: #fff; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 767.98px) { .bread.page-hero { padding: 5.5rem 0 2.75rem; } .page-hero__icon { font-size: 8rem; opacity: 0.06; } } /* ---- BARRA DE CONFIANÇA (reaproveitada em todas as páginas) ---- */ .trust-bar { background: #fff; border-bottom: 1px solid #ececec; } .trust-bar__row { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; justify-content: center; padding: 1.35rem 0; } .trust-bar__item { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; font-weight: 600; color: var(--primary-color); } .trust-bar__item i { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(232, 100, 27, 0.12); color: var(--secondary-color-dark); font-size: 0.95rem; flex-shrink: 0; } /* ---- CONTEÚDO PRINCIPAL + SIDEBAR (fecha o "canto morto") ---- */ .page-body { padding: 3.25rem 0 4rem; } .page-body__content h2 { font-size: 1.35rem; color: var(--primary-color); font-family: var(--secondary-font); position: relative; padding-left: 1rem; margin-top: 2.25rem; } .page-body__content h2::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--secondary-color); } .page-body__content ul { padding-left: 0; list-style: none; margin: 1rem 0 1.5rem; } .page-body__content ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; color: #494f57; } .page-body__content ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0.05em; color: var(--secondary-color-dark); font-size: 0.8rem; } .page-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .page-sidebar__card { background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px -18px rgba(20, 25, 31, 0.25); } .page-sidebar__card h3 { font-family: var(--secondary-font); font-size: 1rem; color: var(--primary-color); margin: 0; padding: 1.1rem 1.35rem; border-bottom: 3px solid var(--secondary-color); } .page-sidebar__card--contact { background: linear-gradient(160deg, var(--primary-color) 0%, var(--primary-color-dark) 100%); color: #fff; padding: 1.5rem 1.35rem 1.65rem; text-align: center; } .page-sidebar__card--contact h3 { border-bottom: none; padding: 0 0 0.5rem; color: #fff; font-size: 1.15rem; } .page-sidebar__card--contact p { color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; margin-bottom: 1.1rem; } .page-sidebar__card--contact .btn-whatsapp { width: 100%; justify-content: center; } .page-sidebar__links { list-style: none; margin: 0; padding: 0.5rem 0; } .page-sidebar__links li + li { border-top: 1px solid #f1f1f1; } .page-sidebar__links a { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.35rem; font-size: 0.9rem; color: var(--primary-color); font-weight: 500; transition: 0.2s; } .page-sidebar__links a i { color: var(--secondary-color-dark); font-size: 0.75rem; transition: transform 0.2s; } .page-sidebar__links a:hover { color: var(--secondary-color-dark); background: #fff8f4; padding-left: 1.6rem; } .page-sidebar__links a:hover i { transform: translateX(3px); } @media (max-width: 991.98px) { .page-sidebar { margin-top: 2.5rem; } } /* ---- Os botões flutuantes de WhatsApp (JS define "bottom" inline e ficam fixos no canto direito) sobrepunham o texto do artigo em telas estreitas, porque o conteúdo ocupa 100% da largura sem reservar espaço pra eles. Reserva uma faixa à direita só no mobile, onde o problema acontece. ---- */ @media (max-width: 575.98px) { .page-body__content, .page-sidebar__card { padding-right: 3.75rem; } .page-sidebar__card--contact { padding-right: 1.35rem; } } /* ---- Ícone flutuante de redes sociais: estava centralizado na vertical (top:50%) e colidia com o hero/trust-bar em telas mais baixas. Ancorado no canto inferior esquerdo, junto do padrão de "ilhas flutuantes" que o WhatsApp já usa no canto direito. ---- */ .social-widget { top: auto !important; bottom: 1.25rem; transform: none !important; z-index: 5; } /* ---- FAIXA DE BENEFÍCIOS (fecha o conteúdo antes do CTA final) ---- */ .benefits-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin: 2.25rem 0 0.5rem; } @media (min-width: 576px) { .benefits-strip { grid-template-columns: repeat(4, 1fr); } } .benefits-strip__item { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 1.1rem 0.9rem; text-align: center; } .benefits-strip__item i { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(232, 100, 27, 0.12); color: var(--secondary-color-dark); font-size: 1.1rem; margin-bottom: 0.6rem; } .benefits-strip__item span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--primary-color); line-height: 1.3; } /* ---- CTA FINAL (presente em toda página, evita "final vazio") ---- */ .closing-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: linear-gradient(120deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); border-radius: 18px; padding: 2.25rem 2.5rem; margin: 3.5rem 0 0; position: relative; overflow: hidden; } .closing-cta::before { content: "\f542"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -1rem; bottom: -2rem; font-size: 9rem; color: #fff; opacity: 0.06; } .closing-cta__text { position: relative; z-index: 1; } .closing-cta__text h2 { color: #fff; font-size: 1.4rem; margin: 0 0 0.35rem; } .closing-cta__text p { color: rgba(255, 255, 255, 0.75); margin: 0; font-size: 0.92rem; } .closing-cta .btn-whatsapp { position: relative; z-index: 1; flex-shrink: 0; }