/* ------------------------------------------------------------------ Theme Name: RC PEÇAS E SUPRIMENTOS Description: Layout exclusivo para o site acima, proibido cópias ou modificações, SEJA CRIATIVO!!! Author: Joaby Design ********************************************************************* -------------------------------------------------------------------*/ /* -- Css -- */ html, body, div, span, h2, h3, blockquote, pre, a, code, em, font, img, small, strong, b, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; border: 0; outline: 0;} html, body {height: auto; font: 12px sans-serif, poppins; text-decoration:none; color: #666666; /* CAMADAS: grunge + vinheta + metal */ background: /* ruído (noise) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"), /* “manchas” grunge suaves */ radial-gradient(900px 480px at 15% 25%, rgba(255,255,255,.08), transparent 55%), radial-gradient(800px 520px at 80% 35%, rgba(0,0,0,.35), transparent 60%), radial-gradient(1000px 680px at 50% 110%, rgba(0,0,0,.55), transparent 60%), /* vinheta nas bordas */ radial-gradient(1200px 800px at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%), /* base metal (degradê) */ linear-gradient(180deg, #2a2f34 0%, #1b1f24 45%, #121519 100%); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 220px 220px, cover, cover, cover, cover, cover; background-attachment: fixed; /* deixa mais “site” */ } /* -- Básico -- */ a {color: #656565; text-decoration: inherit; } a:visited {} a:hover, a:active {color: #b1b1b1; text-decoration:none; } b, strong, bold {color: #b1b1b1; font-weight: 900; } u {color: #777; text-decoration:none; } underline {color: #656565; padding-bottom: 2px; border-bottom: 1px dashed #ccc; text-decoration:none; } i {color: #df9a41; font-family: georgia; } em {color: #df9a41; font-family: georgia; } t {font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; overflow: hidden; color: #182020; } h6{ width: 100%; margin: 10px; font-family: roboto slab; overflow: hidden; text-align: center; position: relative; font-weight:300; font-size: 30px; color: #CB0505; } h2 { color: #656565; font-family: 'poppins', serif; font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; } img{border-radius: 3px; } .h6ss{ position: relative; background-image: url(https://daftransportadora.com.br/wp-content/uploads/2024/10/1-1.webp); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: 100% 100%; margin: 0px auto 0; position: relative; width: 100%; height: 100vh; } .h6ss .texxt{ display: block; text-align: center; text-transform: normal; font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 3.0em; color: #fff; position: relative; padding-top: 25%; margin: 0px; } .h6ss .text2{ display: block; height: 300px; max-height: 300px; text-align: center; position: relative; margin: 0 auto; margin-bottom: 100px; margin-top: 0px; } .h6ss .text2 hs2 { display: inline-block; text-align: left; font-weight: 800; font-size: 25px; background: #950100; color: #fff; padding: 50px 50px 50px 50px ; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 10px; margin: 0 auto; } .h6ss .text2 p{ margin-bottom: 1.75em;} @media screen and (min-width:300px) and (max-width:1000px) { .h6ss { width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } } .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 20px; right: 20px; background-color: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 1000; transition: 0.3s; } .whatsapp-float:hover { transform: scale(1.1); background-color: #1ebe5d; } /*========================================*/ /*------------ [_Reset_Styles] -----------*/ /*========================================*/ * { margin: 0px; padding: 0px; border: none; outline: none !important; } ::-webkit-scrollbar { background-color: #fff; width: 10px; } ::-webkit-scrollbar-thumb { background-color: #a7a7a7; } /* -- Demais Formatações -- */ .more-link{font-family: 'open sans'; float: right; margin-top: 5px; font-weight: 800; text-align: center; font-size: 14px; color: #666; background: #ededed; display: block; padding: 10px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .links {width: 100%; margin: 0 0 5px 0;} .links ul,.links ul li {float:left; margin: 0; padding: 0; list-style-type:none;} .links li a {display: block; width: 277px; height: auto; margin: 0; padding: 2px 2px 2px 5px; color: #c8add8;border-bottom:1px solid #ebebeb;} .links ul li a:hover {color: #a6cadd;} img.alignright {float: right; margin-left: 10px; margin-bottom: 1px; margin-top: 10px; } img.alignleft {float: left; margin-right: 10px; margin-bottom: 1px; margin-top: 10px; } .aligncenter {margin: 0 auto; display: block; } .left, .alignleft {float: left; margin-right:2%; } .right, .alignright {float: right; margin-left:2%;} .alignnone {display: block; margin-left: -20px;} .wp-caption {position: relative; } .wp-caption-text {margin: 0 3% 0 0; padding: 3px 10px; position: absolute; left: 10px; bottom: 10px; background: url(images/back-caption.png) repeat; color: #fff; text-align: left; font: 12px Arial, serif; font-style: italic;} hr {clear: both; height: 1px;margin: 5px 0; border-top: 1px dotted #ebebeb; border-bottom: 0; border-left: 0; border-right: 0;} destaque{width: 100%; font-family: 'open sans', sans-serif; text-align: center; display: inline-block; letter-spacing: 0px; position: relative; color: #fff; text-transform: uppercase; border-radius: 2px; font-size: 12px; padding: 10px; margin-top: 10px; margin-bottom: 10px; font-weight: 800; background: rgba(0, 0, 0, 0.4); } input, textarea, select, button { margin: 3px; padding:10px; font-size: 11px; background: rgba(0, 0, 0, 0.07); color: #666; border: 0px solid #ebebeb; outline:none;} .on{width: 100%; font-family: 'open sans', sans-serif; font-style: italic; text-align: center; display: inline-block; position: relative; color: #666; font-size: 14px; padding: 10px; margin-top: 5px; margin-bottom: 10px; border-bottom: 3px solid #EAEAEA; } /* -- Quote -- */ blockquote { padding: 0.5em 10px; margin-top: 15px; margin-bottom: 15px; background: rgba(0, 0, 0, 0.02); } blockquote::before{ content: "\f10d"; font-family: FontAwesome; font-style: normal; color: #00dd42; font-size: 15px; font-weight: normal; text-decoration: inherit; margin-right: 5px;} /* -- Setas -- */ .seta-esquerda:before {content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #461e64; float: right; right: 70px; position: absolute; top: 130px; z-index: 99; } .seta-direita:before {content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff;} .seta-cima:before { content: ""; display: inline-block; vertical-align: middle; margin-top: -10px; margin-left: 49%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; z-index: 99; position: absolute; } .seta-baixo:before { content: ""; display: inline-block; vertical-align: middle; margin-top: 0px; margin-left: 45%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; z-index: 99; position: absolute; } /* -- Font Face -- */ @font-face {font-family: 'Nouvelle Vague'; src: url('fontes/NouvelleVague-Black.eot'); src: url('fontes/NouvelleVague-Black.eot?#iefix') format('embedded-opentype'), url('fontes/NouvelleVague-Black.woff') format('woff'), url('fontes/NouvelleVague-Black.ttf') format('truetype'); font-weight: 900; font-style: normal;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-Italic.eot');src: url('fontes/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('fontes/OpenSans-Italic.woff') format('woff'), url('fontes/OpenSans-Italic.ttf') format('truetype');font-weight: normal;font-style: italic;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-Bold.eot');src: url('fontes/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-Bold.woff') format('woff'),url('fontes/OpenSans-Bold.ttf') format('truetype'); font-weight: bold;font-style: normal;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-SemiboldItalic.eot');src: url('fontes/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-SemiboldItalic.woff') format('woff'),url('fontes/OpenSans-SemiboldItalic.ttf') format('truetype');font-weight: 600;font-style: italic;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans.eot');src: url('fontes/OpenSans.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans.woff') format('woff'),url('fontes/OpenSans.ttf') format('truetype'); font-weight: normal;font-style: normal;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-ExtraboldItalic.eot');src: url('fontes/OpenSans-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-ExtraboldItalic.woff') format('woff'),url('fontes/OpenSans-ExtraboldItalic.ttf') format('truetype');font-weight: 800;font-style: italic;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-Light.eot');src: url('fontes/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('fontes/OpenSans-Light.woff') format('woff'),url('fontes/OpenSans-Light.ttf') format('truetype');font-weight: 300;font-style: normal;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-BoldItalic.eot');src: url('fontes/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-BoldItalic.woff') format('woff'),url('fontes/OpenSans-BoldItalic.ttf') format('truetype');font-weight: bold;font-style: italic;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-Semibold.eot');src: url('fontes/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-Semibold.woff') format('woff'),url('fontes/OpenSans-Semibold.ttf') format('truetype');font-weight: 600;font-style: normal;} @font-face {font-family: 'Open Sans';src: url('fontes/OpenSans-Extrabold.eot');src: url('fontes/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSans-Extrabold.woff') format('woff'),url('fontes/OpenSans-Extrabold.ttf') format('truetype'); font-weight: 800;font-style: normal; } @font-face {font-family: 'Open Sans';src: url('fontes/OpenSansLight-Italic.eot');src: url('fontes/OpenSansLight-Italic.eot?#iefix') format('embedded-opentype'),url('fontes/OpenSansLight-Italic.woff') format('woff'),url('fontes/OpenSansLight-Italic.ttf') format('truetype');font-weight: 300;font-style: italic;} /* -- Area inicial -- */ #page-total { background: transparent; height: auto; position: relative; width: 1200px; margin: 0 auto; } #main { background: transparent; height: auto; position: relative; width: 1200px; margin: 0 auto;} #page-metade {display: block; width: 839px; position: relative; float: left; margin-bottom: 13px; margin-top: 0px; } #page-metade2 {display: block; width: 1100px; position: relative; float: left; margin-bottom: 13px; margin-top: 0px; } #btn-topo { position: fixed; bottom: 100px; right: 30px; z-index: 9999; width: 40px; height: 40px; background: #ff9e34; /* sua cor principal */ color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; font-family: 'Open Sans', sans-serif; text-decoration: none; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } /* Quando aparece */ #btn-topo.show { opacity: 1; visibility: visible; } /* Hover */ #btn-topo:hover { background: #ff9e34; transform: translateY(-3px); } /* Mobile ajuste */ @media (max-width: 768px) { #btn-topo { bottom: 90px; right: 30px; width: 40px; height: 40px; } } /* HEADER INTERNO IGUAL AO TOPO DA HOME */ .header-interno { width: 100%; height: 200px; max-height: 200px; background: #07111f; position: relative; z-index: 99999; overflow: visible; } .header-interno .topo { position: absolute !important; top: 0; left: 0; width: 100%; z-index: 99999; pointer-events: none; } .header-interno .barra, .header-interno nav, .header-interno label, .header-interno .barrabotao { pointer-events: auto; } .header-interno .barra { max-width: 1200px; margin: 0 auto; height: 100px; padding: 20px 40px; display: flex; align-items: center; gap: 26px; background: transparent; } .header-interno .logo { background: url(images/logo.png) left center no-repeat; background-size: contain; width: 260px; height: 90px; flex: 0 0 auto; } /* ============================== PÁGINA EMPRESA RESPONSIVA ============================== */ .empresa-page { width: 100%; } .container { width: 90%; max-width: 1180px; margin: 0 auto; } /* BANNER */ .banner-empresa { min-height: 420px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65)), url("images/fundo-sobre.png") center/cover no-repeat; display: flex; align-items: center; } .banner-overlay { width: 100%; padding: 90px 0; } .banner-empresa h1 { color: #fff; font-size: clamp(36px, 6vw, 36px); text-transform: uppercase; margin: 0 0 15px; font-family: 'Open Sans', sans-serif; font-weight: 900; } .banner-empresa p { color: #f2f2f2; font-size: clamp(17px, 2vw, 17px); max-width: 650px; line-height: 1.5; } /* SOBRE */ .sobre-empresa { padding: 30px 0; } .sobre-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; } .subtitulo { display: inline-block; color: #ff8a00; text-transform: uppercase; font-weight: 900; font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; } .sobre-texto h2, .contato-empresa h2 { font-size: clamp(28px, 4vw, 28px); margin: 0 0 22px; color: #ffa844; font-family: 'Open Sans', sans-serif; text-align: justify; line-height: 1.15; } .titulo-centro h2 { font-size: clamp(28px, 4vw, 28px); margin: 0 0 22px; color: #000; font-family: 'Open Sans', sans-serif; line-height: 1.15; } .sobre-texto p, .contato-empresa p { font-size: 17px; line-height: 1.8; color: #eee; margin-bottom: 18px; } .sobre-img img { width: 100%; display: block; border-radius: 18px; box-shadow: 0 20px 45px rgba(0,0,0,.18); } .btn-laranja { display: inline-block; background: #ff8a00; color: #fff; padding: 15px 28px; border-radius: 5px; text-decoration: none; font-weight: 900; text-transform: uppercase; transition: .3s; } .btn-laranja:hover { background: #111; } /* DIFERENCIAIS */ .diferenciais { background: #f5f5f5; padding: 80px 0; } .titulo-centro { text-align: center; max-width: 760px; margin: 0 auto 45px; } .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .card { background: #fff; padding: 35px 28px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); border-bottom: 4px solid #ff8a00; transition: .3s; } .card:hover { transform: translateY(-6px); } .card strong { font-size: 42px; color: #ff8a00; font-weight: 900; } .card h3 { font-size: 22px; margin: 15px 0 10px; color: #111; } .card p { color: #666; font-size: 16px; line-height: 1.7; } /* SEGMENTOS */ .segmentos { padding: 80px 0; } .segmentos .titulo-centro h2 { color: #fff; } .segmentos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .segmentos-grid div { background: #1d1d1d; color: #fff; padding: 24px; border-left: 5px solid #ff8a00; font-size: 18px; font-weight: 800; text-transform: uppercase; } /* ORÇAMENTO */ .orcament { background: #ff8a00; padding: 60px 0; margin: 0 auto 0px auto; } .orcament-box { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .orcament h2 { color: #fff; font-size: clamp(28px, 4vw, 28px); font-family: 'Open Sans', sans-serif; font-weight: 800; margin: 0 0 10px; } .orcament p { color: #fff; font-size: 18px; max-width: 700px; line-height: 1.6; } .btn-branco { background: #fff; color: #111; padding: 16px 28px; border-radius: 5px; text-decoration: none; font-weight: 900; text-transform: uppercase; white-space: nowrap; } /* CONTATO */ .contato-empresa { padding: 80px 0; background: #fff; } .contato-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; } .contato-info { background: #f5f5f5; padding: 35px; border-radius: 14px; border-left: 5px solid #ff8a00; } .contato-info p { margin: 0 0 18px; color: #333; word-break: break-word; } /* ============================== RESPONSIVO ============================== */ @media (max-width: 900px) { .sobre-grid, .contato-grid, .orcamento-box { grid-template-columns: 1fr; flex-direction: column; text-align: center; } .cards-grid, .segmentos-grid { grid-template-columns: 1fr 1fr; } .sobre-texto, .contato-empresa { text-align: center; } .orcamento-box { align-items: center; } } @media (max-width: 600px) { .container { width: 92%; } .banner-empresa { min-height: 360px; text-align: center; } .banner-overlay { padding: 70px 0; } .sobre-empresa, .diferenciais, .segmentos, .contato-empresa { padding: 55px 0; } .cards-grid, .segmentos-grid { grid-template-columns: 1fr; } .card { padding: 28px 22px; } .segmentos-grid div { text-align: center; border-left: none; border-top: 5px solid #ff8a00; } .btn-laranja, .btn-branco { width: 100%; text-align: center; } .contato-info { padding: 25px 20px; } } .empresa-page .mvv-rc { width: 100%; padding: 90px 0; color: #fff; overflow: hidden; } .empresa-page .mvv-titulo { max-width: 720px; margin: 0 auto 45px; text-align: center; } .empresa-page .mvv-titulo span { display: inline-block; color: #ff7a00; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .empresa-page .mvv-titulo h2 { margin: 0 0 18px; color: #fff; font-size: clamp(30px, 4vw, 30px); font-weight: 900; line-height: 1.15; font-family: 'Open Sans', sans-serif; text-transform: uppercase; } .empresa-page .mvv-titulo p { margin: 0; color: #d6d6d6; font-size: 17px; line-height: 1.7; } .empresa-page .mvv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .empresa-page .mvv-card { position: relative; min-height: 310px; padding: 38px 30px; background: linear-gradient(145deg, #1b1f22, #0d0d0d); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 15px 35px rgba(0, 0, 0, .28); transition: all .3s ease; } .empresa-page .mvv-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; border-top: 4px solid #ff7a00; pointer-events: none; } .empresa-page .mvv-card:hover { transform: translateY(-7px); border-color: rgba(255, 122, 0, .55); box-shadow: 0 18px 45px rgba(255, 122, 0, .16); } .empresa-page .mvv-card.destaque { background: linear-gradient(145deg, #ff7a00, #d95f00); } .empresa-page .mvv-card.destaque::before { border-top-color: #fff; } .empresa-page .mvv-numero { color: #ff7a00; font-size: 46px; font-weight: 900; line-height: 1; margin-bottom: 22px; } .empresa-page .mvv-card.destaque .mvv-numero { color: #fff; } .empresa-page .mvv-card h3 { margin: 0 0 16px; color: #fff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .empresa-page .mvv-card p { margin: 0; color: #d9d9d9; font-size: 16px; line-height: 1.75; } .empresa-page .mvv-card.destaque p { color: #fff; } /* RESPONSIVO */ @media (max-width: 950px) { .empresa-page .mvv-rc { padding: 75px 0; } .empresa-page .mvv-grid { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; } .empresa-page .mvv-card { min-height: auto; } } @media (max-width: 600px) { .empresa-page .mvv-rc { padding: 60px 0; } .empresa-page .mvv-titulo { margin-bottom: 32px; } .empresa-page .mvv-titulo span { font-size: 12px; } .empresa-page .mvv-titulo p { font-size: 15px; } .empresa-page .mvv-card { padding: 30px 22px; } .empresa-page .mvv-numero { font-size: 38px; margin-bottom: 18px; } .empresa-page .mvv-card h3 { font-size: 22px; } .empresa-page .mvv-card p { font-size: 15px; } } /* ============================== PRODUTOS PRINCIPAIS - RC ============================== */ .empresa-page .produtos-rc { width: 100%; padding: 90px 0; overflow: hidden; } .empresa-page .produtos-titulo { max-width: 760px; margin: 0 auto 45px; text-align: center; } .empresa-page .produtos-titulo span { display: inline-block; color: #ff7a00; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .empresa-page .produtos-titulo h2 { margin: 0 0 18px; color: #fff; font-size: clamp(30px, 4vw, 30px); font-weight: 900; line-height: 1.15; font-family: 'Open Sans', sans-serif; text-transform: uppercase; } .empresa-page .produtos-titulo p { margin: 0; color: #eee; font-size: 17px; line-height: 1.7; } .empresa-page .produtos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .empresa-page .produto-card { position: relative; min-height: 245px; padding: 34px 28px; background: transparent; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); transition: all .3s ease; overflow: hidden; } .empresa-page .produto-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #ff7a00; } .empresa-page .produto-card::after { content: ""; position: absolute; right: -35px; bottom: -35px; width: 110px; height: 110px; background: rgba(255, 122, 0, .08); border-radius: 50%; } .empresa-page .produto-card:hover { transform: translateY(-7px); box-shadow: 0 18px 45px rgba(0, 0, 0, .14); border-color: rgba(255, 122, 0, .45); } .empresa-page .produto-icone { width: 64px; height: 64px; margin-bottom: 22px; background: linear-gradient(145deg, #ff7a00, #d95f00); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 31px; box-shadow: 0 10px 22px rgba(255, 122, 0, .28); } .empresa-page .produto-card h3 { margin: 0 0 12px; color: #eee; font-size: 22px; font-weight: 900; text-transform: uppercase; } .empresa-page .produto-card p { margin: 0; color: #ccc; font-size: 15.5px; line-height: 1.65; } .produtos-btn-wrap { width: 100%; display: flex; justify-content: center; margin-top: 35px; } .btn-produtos { background: #ff7a00; color: #fff; padding: 14px 28px; text-decoration: none; font-weight: 900; border-radius: 4px; text-transform: uppercase; transition: .3s; } .btn-produtos { background: linear-gradient(135deg, #ff7a00, #ff5a00); box-shadow: 0 8px 20px rgba(255, 122, 0, 0.35); } .btn-produtos:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(255, 122, 0, 0.45); } .btn-produtos { transition: all .25s ease; } @media (max-width: 900px){ .btn-produtos { width: 100%; text-align: center; } } /* TÍTULO PREMIUM EMPRESA CORRIGIDO */ .empresa-page .titulo-empresa-premium { width: 100%; margin: 45px 0 35px; text-align: left; display: block; } .empresa-page .titulo-empresa-premium .tag { display: block; color: #ff7a00; font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; } .empresa-page .titulo-empresa-premium h1 { display: block; margin: 0; color: #ffffff; font-size: clamp(42px, 6vw, 42px); font-weight: 900; line-height: 1; letter-spacing: -2px; } .empresa-page .titulo-empresa-premium .linha { display: block; width: 75px; height: 4px; background: #ff7a00; border-radius: 10px; margin: 22px 0 18px; } .empresa-page .titulo-empresa-premium p { margin: 0; max-width: 620px; color: #cfcfcf; font-size: 18px; line-height: 1.6; } /* MOBILE */ @media (max-width: 600px) { .empresa-page .titulo-empresa-premium { margin: 35px 0 28px; } .empresa-page .titulo-empresa-premium .tag { font-size: 11px; letter-spacing: 2px; } .empresa-page .titulo-empresa-premium h1 { font-size: 42px; } .empresa-page .titulo-empresa-premium p { font-size: 15px; } } /* ============================== DIVISOR PREMIUM EMPRESA ============================== */ .empresa-page .empresa-divisor-premium { position: relative; width: 100%; padding: 85px 0 75px; background: linear-gradient(135deg, rgba(8,10,12,.96), rgba(22,26,29,.94)), url("SUA-IMAGEM-DE-FUNDO.jpg") center/cover no-repeat; overflow: hidden; } /* detalhe laranja lateral */ .empresa-page .empresa-divisor-premium::before { content: ""; position: absolute; left: -90px; top: 50%; width: 230px; height: 230px; background: radial-gradient(circle, rgba(255,122,0,.35), transparent 68%); transform: translateY(-50%); } /* linhas decorativas */ .empresa-page .empresa-divisor-premium::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, #ff7a00); } .empresa-page .empresa-divisor-conteudo { position: relative; z-index: 2; max-width: 760px; padding-left: 28px; border-left: 4px solid #ff7a00; } .empresa-page .empresa-divisor-conteudo span { display: inline-block; color: #ff7a00; font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; } .empresa-page .empresa-divisor-conteudo h1 { margin: 0; color: #fff; font-size: clamp(46px, 7vw, 82px); font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: -2px; } .empresa-page .empresa-divisor-conteudo h1::after { content: ""; display: block; width: 95px; height: 5px; background: linear-gradient(90deg, #ff7a00, #ff4500); border-radius: 10px; margin: 24px 0 22px; } .empresa-page .empresa-divisor-conteudo p { margin: 0; max-width: 620px; color: #d7d7d7; font-size: 18px; line-height: 1.7; } /* MOBILE */ @media (max-width: 600px) { .empresa-page .empresa-divisor-premium { padding: 60px 0 55px; } .empresa-page .empresa-divisor-conteudo { padding-left: 18px; } .empresa-page .empresa-divisor-conteudo span { font-size: 11px; letter-spacing: 2px; } .empresa-page .empresa-divisor-conteudo h1 { font-size: 42px; } .empresa-page .empresa-divisor-conteudo p { font-size: 15px; } } /* TABLET */ @media (max-width: 950px) { .empresa-page .produtos-rc { padding: 75px 0; } .empresa-page .produtos-grid { grid-template-columns: repeat(2, 1fr); } } /* CELULAR */ @media (max-width: 600px) { .empresa-page .produtos-rc { padding: 60px 0; } .empresa-page .produtos-titulo { margin-bottom: 32px; } .empresa-page .produtos-titulo span { font-size: 12px; } .empresa-page .produtos-titulo p { font-size: 15px; } .empresa-page .produtos-grid { grid-template-columns: 1fr; gap: 16px; } .empresa-page .produto-card { min-height: auto; padding: 30px 22px; } .empresa-page .produto-icone { width: 56px; height: 56px; font-size: 27px; margin-bottom: 18px; } .empresa-page .produto-card h3 { font-size: 20px; } .empresa-page .produto-card p { font-size: 15px; } } .product-categories { display: flex; flex-direction: column; gap: 40px; margin: 50px; } .category { display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); padding: 30px; font-family: 'Open Sans', sans-serif; font-weight: 800; transition: transform .3s ease; } .category:hover { transform: translateY(-4px); } .category-image { flex: 0 0 160px; margin-right: 25px; } .category-image img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; } .category-content { flex: 1; } .category-title { font-size: 28px; font-weight: bold; margin-bottom: 15px; color: #222; text-transform: uppercase; } .brands { display: flex; flex-wrap: wrap; gap: 20px; } .brand img { width: 110px; transition: transform .3s ease; } .brand img:hover { transform: scale(1.12); } /* Responsividade */ @media (max-width: 1200px) { .category { flex-direction: column; } .category-image { width: 100%; margin-bottom: 18px; } .brand img { width: 90px; } } @media (max-width: 768px) { .category-title { font-size: 24px; } .brand img { width: 75px; } } @media (max-width: 480px) { .brand img { width: 60px; } } :root { --rc-azul: #5a6a75; --rc-azul-2: #0d2436; --rc-laranja: #f58220; --rc-laranja-2: #ff9b3d; --rc-cinza: #f4f6f8; --rc-texto: #9fa8af; --rc-branco: #ffffff; } .rc-container { width: min(1180px, 92%); margin: 0 auto; } .rc-produtos-hero { background: linear-gradient(120deg, rgba(7, 24, 38, .96), rgba(13, 36, 54, .90)), url("https://rcpecasesuprimentos.com.br/wp-content/uploads/2026/05/banner-industrial.jpg"); background-size: cover; background-position: center; padding: 110px 0 95px; color: var(--rc-branco); position: relative; overflow: hidden; } .rc-produtos-hero::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(245, 130, 32, .16); filter: blur(8px); } .rc-subtitle, .rc-section-title span, .rc-produtos-final span { display: inline-block; color: var(--rc-laranja); font-weight: 800; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; margin-bottom: 12px; } .rc-produtos-hero h1 { max-width: 720px; font-size: clamp(36px, 6vw, 36px); line-height: .95; font-family: 'Open Sans', sans-serif; margin: 0 0 22px; font-weight: 900; text-transform: uppercase; } .rc-produtos-hero p { max-width: 650px; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); margin-bottom: 32px; } .rc-btn { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--rc-laranja), var(--rc-laranja-2)); color: #fff !important; padding: 15px 28px; border-radius: 50px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 35px rgba(245, 130, 32, .32); transition: .3s ease; } .rc-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(245, 130, 32, .42); } .rc-produtos-page { background: transparent; padding: 80px 0; } .rc-produtos-grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; } .rc-sidebar { border-radius: 24px; padding: 28px; position: sticky; top: 25px; background: linear-gradient(145deg, #1b1f22, #0d0d0d); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 15px 35px rgba(0, 0, 0, .28); } .rc-sidebar h3 { margin: 0 0 20px; color: var(--rc-azul); font-size: 24px; font-weight: 900; } .rc-sidebar a { display: block; padding: 13px 15px; margin-bottom: 9px; border-radius: 14px; text-decoration: none; color: var(--rc-azul); font-weight: 700; background: #111; border: 1px solid transparent; transition: .25s ease; } .rc-sidebar a:hover { color: var(--rc-laranja); border-color: rgba(245, 130, 32, .35); background: #fff7ef; transform: translateX(4px); } .rc-sidebar-cta { margin-top: 28px; background: linear-gradient(145deg, var(--rc-azul), var(--rc-azul-2)); border-radius: 22px; padding: 24px; color: #fff; } .rc-sidebar-cta strong { display: block; font-size: 19px; margin-bottom: 10px; } .rc-sidebar-cta p { color: rgba(255,255,255,.78); line-height: 1.6; font-size: 14px; margin-bottom: 18px; } .rc-sidebar-cta a { background: #25d366; color: #fff !important; text-align: center; margin: 0; } .rc-sidebar-cta a:hover { background: #25d366; color: #000 !important; text-align: center; margin: 0; } .rc-produtos-content { min-width: 0; } .rc-section-title { border-radius: 28px; padding: 34px; margin-bottom: 28px; background: linear-gradient(145deg, #1b1f22, #0d0d0d); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 15px 35px rgba(0, 0, 0, .28); } .rc-section-title h2 { color: var(--rc-azul); font-size: clamp(30px, 4vw, 30px); line-height: 1.05; margin: 0 0 14px; font-family: 'Open Sans', sans-serif; font-weight: 900; } .rc-section-title p { color: var(--rc-texto); font-size: 17px; line-height: 1.7; max-width: 780px; margin: 0; } .rc-products-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .rc-product-card { border-radius: 26px; padding: 28px; display: grid; grid-template-columns: 62px 1fr; gap: 20px; transition: .3s ease; position: relative; overflow: hidden; background: linear-gradient(145deg, #1b1f22, #0d0d0d); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 15px 35px rgba(0, 0, 0, .28); } .rc-product-card::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--rc-laranja); opacity: 0; transition: .3s ease; } .rc-product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(7, 24, 38, .12); } .rc-product-card:hover::before { opacity: 1; } .rc-product-icon { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(145deg, #fff1e5, #ffffff); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: inset 0 0 0 1px rgba(245, 130, 32, .18); } .rc-product-card h3 { color: var(--rc-azul); font-size: 24px; margin: 0 0 10px; font-weight: 900; } .rc-product-card p { color: var(--rc-texto); line-height: 1.65; margin: 0 0 16px; font-size: 15.5px; font-family: 'Open Sans', sans-serif; } .rc-product-card ul { margin: 0; padding: 0; list-style: none; } .rc-product-card li { color: #66757f; font-weight: 600; padding: 8px 0 8px 20px; position: relative; border-bottom: 1px solid rgba(7, 24, 38, .06); } .rc-product-card li:last-child { border-bottom: 0; } .rc-product-card li::before { content: ""; width: 7px; height: 7px; background: var(--rc-laranja); border-radius: 50%; position: absolute; left: 0; top: 17px; } .rc-produtos-final { background: transparent; padding: 85px 0; font-family: 'Open Sans', sans-serif; color: #fff; text-align: center; } .rc-produtos-final h2 { font-size: clamp(30px, 4vw, 42px); color: var(--rc-azul); line-height: 1.05; margin: 0 0 18px; font-family: 'Open Sans', sans-serif; font-weight: 900; } .rc-produtos-final p { max-width: 760px; margin: 0 auto 32px; color: rgba(255, 255, 255, .80); line-height: 1.8; font-size: 17px; } /* Responsivo */ @media (max-width: 1024px) { .rc-produtos-grid { grid-template-columns: 1fr; } .rc-sidebar { position: relative; top: 0; } .rc-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .rc-sidebar h3, .rc-sidebar-cta { grid-column: 1 / -1; } .rc-sidebar a { margin-bottom: 0; } } @media (max-width: 760px) { .rc-produtos-hero { padding: 85px 0 70px; } .rc-produtos-page { padding: 55px 0; } .rc-products-list { grid-template-columns: 1fr; } .rc-product-card { grid-template-columns: 1fr; padding: 24px; } .rc-sidebar { grid-template-columns: 1fr; padding: 22px; } .rc-section-title { padding: 26px; } .rc-produtos-final { padding: 65px 0; } } @media (max-width: 480px) { .rc-produtos-hero h1 { font-size: 35px; } .rc-produtos-hero p, .rc-section-title p, .rc-produtos-final p { font-size: 15.5px; } .rc-btn { width: 100%; padding: 15px 20px; } .rc-product-card h3 { font-size: 22px; } } .pagina-marcas { width: 100%; padding: 90px 20px; background: transparent; } .marcas-container { max-width: 1180px; margin: 0 auto; } .marcas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .marca-card { min-height: 150px; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); transition: all 0.3s ease; } .marca-card:hover { transform: translateY(-6px); border-color: rgba(203, 5, 5, 0.35); box-shadow: 0 18px 42px rgba(0,0,0,0.12); } .marca-card img { max-width: 100%; max-height: 80px; object-fit: contain; filter: grayscale(100%); opacity: 0.78; transition: all 0.3s ease; } .marca-card:hover img { filter: grayscale(0%); opacity: 1; } .marcas-cta { margin-top: 60px; padding: 42px 30px; border-radius: 24px; text-align: center; color: #fff; background: linear-gradient(145deg, #1b1f22, #0d0d0d); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 15px 35px rgba(0, 0, 0, .28); } .marcas-cta h2 { font-size: 30px; margin: 0 0 10px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; } .marcas-cta p { font-size: 17px; margin: 0 0 24px; color: #fff; } .marcas-cta a { display: inline-block; background: #25d366; color: #fff; padding: 15px 30px; border-radius: 50px; font-weight: 800; text-decoration: none; transition: all 0.3s ease; } .marcas-cta a:hover { transform: translateY(-3px); background: #f4f4f4; color: #000; } /* Responsivo */ @media (max-width: 1024px) { .marcas-grid { grid-template-columns: repeat(3, 1fr); } .marcas-topo h1 { font-size: 38px; } } @media (max-width: 768px) { .pagina-marcas { padding: 70px 18px; } .marcas-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .marca-card { min-height: 130px; padding: 22px; } .marcas-topo h1 { font-size: 32px; } .marcas-topo p { font-size: 16px; } .marcas-cta { padding: 34px 22px; } .marcas-cta h2 { font-size: 25px; } } @media (max-width: 480px) { .marcas-grid { grid-template-columns: 1fr; } .marca-card { min-height: 120px; } .marca-card img { max-height: 72px; } .marcas-topo h1 { font-size: 28px; } } /* ===== HEADER SOBRE O HERO (CORRIGIDO) ===== */ .hero{ position: relative; } /* só a barra e itens clicáveis recebem click */ .topo .barra, .topo nav, .topo label, .topo #page-total, .topo .barrabotao{ pointer-events: auto; } /* barra interna alinhada */ .barra{ max-width: 1200px; margin: 0 auto; height: 100px; padding: 20px 40px; display: flex; align-items: center; gap: 26px; background: transparent; } /* logo */ .logo{ background: url(images/logo.png) left center no-repeat; background-size: contain; width: 260px; height: 90px; flex: 0 0 auto; } /* responsivo do header */ @media (max-width: 900px){ .barra{ height: 84px; padding: 16px 18px; } .logo{ width: 190px; height: 56px; } } /* garante que o hero seja a referência do absolute */ .hero{ position: relative !important; overflow: visible !important; } /* swiper NÃO pode cortar elementos fora */ .heroSwiper, .heroSwiper .swiper-wrapper, .heroSwiper .swiper-slide{ overflow: visible !important; } /* garante altura do hero (se não tiver, absolute “cai” fora) */ .heroSwiper{ min-height: 520px !important; /* ajuste se seu slide for maior */ } /* BARRA INFOS (desktop) */ .barrainfos{ position: relative; left: 50%; top: 70px; transform: translateX(-50%); width: min(1200px, 92vw); display: flex; justify-content: center; gap: 10px; margin-bottom: 150px; } .barrainfos .cs1 { flex: 1 1 0; max-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; background: rgba(10,12,18,.75); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); color: #fff; } .barrainfos .cs1 i { font-size: 22px; color: #ff8a00; margin-right: 8px; } .barrainfos .cs1 span { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 8px; } .barrainfos .cs1 p { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; color: #fff; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); margin-top: 8px; } /* MOBILE: vira abaixo do slide (pra não estourar) */ @media (max-width: 700px){ .barrainfos{ position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: -35px auto 0 !important; flex-direction: column !important; align-items: center !important; } .barrainfos .cs1{ width: min(350px, 92vw) !important; max-width: none !important; } } /* Fim do botão e conteúdo */ /* ========================= SEÇÃO SOBRE RC PEÇAS ========================= */ .sobre-rc { width: 100%; position: relative; display: block; height: 430px; overflow: hidden; margin-bottom: 50px; margin-top: 50px; max-width: 100%; background: url(images/fundo-sobre.png) top center no-repeat; /* A imagem */ background-position: right center; background-size: 100% 170%; /* A imagem ocupará 100% da largura e 100% da altura */ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 20px 30px rgba(255,255,255,0.03), inset 0 -20px 30px rgba(0,0,0,0.45), 0 12px 30px rgba(0,0,0,0.45); } /* brilho interno nas bordas */ .sobre-rc::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.08); z-index: 5; } /* faixa lateral esquerda com textura escura */ .sobre-rc__left { position: absolute; min-height: 100%; padding: 10px; z-index: 2; left: 0px; } .sobre-rc__title { font-size: 30px; font-weight: 900; line-height: 1.1; text-transform: none; margin: 10px 0 12px; padding: 10px; text-align: left; font-family: 'Open Sans', sans-serif; background: linear-gradient( 180deg, #fefefe 1%, /* brilho alto */ #f7f7f7 18%, #ededed 35%, #dcdcdc 50%, /* corpo cinza vivo */ #f0f0f0 65%, #fafafa 80%, #d8d8d8 100% /* base clara */ ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 2px rgba(0,0,0,0.30), 0 0 10px rgba(255,255,255,0.45); } .sobre-rc__title hss{ font-size: 35px; color: #fff; text-align: left; font-style: italic; text-shadow: none; background: none; font-family: 'Open Sans', sans-serif; } .sobre-rc__left .button { display: inline-flex; align-items: center; justify-content: center; top: 20px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; border-radius: 999px; /* mantém a esquerda redonda */ border: 1px solid #ff9a2f; background: linear-gradient( 180deg, #ffb85c 0%, #ff9a2f 40%, #ff7a00 65%, #e06a00 100% ); box-shadow: 0 6px 16px rgba(255, 138, 0, 0.55), inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.25); border-radius: 156px 0px 131px 7px; -webkit-border-radius: 156px 0px 131px 7px; -moz-border-radius: 156px 0px 131px 7px; transition: all .25s ease; } .sobre-rc__left .button:hover { transform: translateY(-2px); color: #000; box-shadow: 0 10px 25px rgba(255, 140, 0, 0.9), inset 0 1px 2px rgba(255,255,255,0.6); } .sobre-rc__text { position: relative; max-width: 35%; color: #f2f2f2; font-size: 15px; line-height: 1.65; font-weight: 400; padding: 10px; } .sobre-rc__text strong { font-weight: 700; color: #ffffff; } /* lado direito com imagem */ .sobre-rc__right { position: absolute; top: 0; right: 0; width: 58%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01)), linear-gradient(135deg, #1d2027 0%, #0c1017 45%, #090c12 100%); z-index: 1; filter: contrast(1.05) brightness(0.95); } /* peça metálica diagonal */ .sobre-rc__right::before { content: ""; position: absolute; left: -20px; top: -10px; width: 100px; height: 430px; transform: skewX(-35deg); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 16%, rgba(0,0,0,0.12) 48%, rgba(255,255,255,0.06) 100%), linear-gradient(135deg, #3d424b 0%, #1f242c 45%, #11161d 100%); border-left: 2px solid rgba(255,255,255,0.2); border-right: 2px solid rgba(255,255,255,0.06); box-shadow: inset 1px 0 0 rgba(255,255,255,0.14), inset -1px 0 0 rgba(255,255,255,0.05), 8px 0 20px rgba(0,0,0,0.35); z-index: 3; } /* brilho do chanfro */ .sobre-rc__right::after { content: ""; position: absolute; left: 4px; top: 18px; width: 4px; height: calc(100% - 36px); transform: skewX(-35deg); background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08)); opacity: 0.7; z-index: 4; } /* leve escurecimento nas bordas da imagem */ .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, transparent 24%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.22) 100%); z-index: 2; pointer-events: none; } /* RESPONSIVO CORRIGIDO - SOBRE RC */ .sobre-rc { background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; } @media (max-width: 980px) { .sobre-rc { height: auto !important; min-height: unset !important; padding: 28px 16px 32px !important; margin-top: 80px !important; margin-bottom: 40px !important; background-size: cover !important; background-position: 62% center !important; } .sobre-rc::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 42%, rgba(0,0,0,.32) 100% ); z-index: 1; pointer-events: none; } .sobre-rc__left { position: relative !important; width: 100% !important; max-width: 330px !important; min-height: auto !important; padding: 0 !important; left: auto !important; z-index: 3 !important; } .sobre-rc__title { font-size: 18px !important; line-height: 1.1 !important; padding: 0 !important; margin-bottom: 12px !important; } .sobre-rc__title hss { font-size: 25px !important; line-height: 1.05 !important; } .sobre-rc__text { max-width: 270px !important; font-size: 12.5px !important; line-height: 1.55 !important; padding: 0 !important; margin: 0 0 16px !important; } .sobre-rc__left .button { margin-top: 0 !important; top: 0 !important; font-size: 11px !important; padding: 8px 16px !important; } .sobre-rc__right { display: none !important; } } /* -- Sobrenos -- */ #sobrenos{width: 100%; position: relative; display: block; height: auto; margin-top: 130px; margin-bottom: 120px; background: transparent; } #sobrenos caix1{display: inline-block; width: 50%; background: transparent; min-height: 100%; float: left; position: relative; } #sobrenos caix2{display: inline-block; width: 50%; position: relative; } #sobrenos logo{display: inline-block; width: 100%; height: 200px; align-content: center; background: url(images/logo2.svg) top center no-repeat; min-height: 100% } #sobrenos texto{display: inline-block; padding: 20px; padding-top: 20px; text-align: left; color: #5a5a5a; line-height: 1.6em; font-size: 1.45rem; } #sobrenos .bots{display: inline-block; position: relative; margin: 20px; font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; } #sobrenos .bots a{padding: 10px 20px 10px 20px; border-radius: 50px; background: #CB0505; color: #fff; font-weight: 800; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease;} #sobrenos .bots a:hover{color: #fff; background: #030F27; letter-spacing: 0.1px; transition: box-shadow .5s; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } #servicos { width: 100%; position: relative; display: block; height: auto; min-height: 650px; overflow: hidden; margin-top: 0px; margin-bottom: 0px; } #servicos h2 { display: block; text-align: left; margin-top: 20px; font-size: 2.4rem; color: #cb0505; font-family: 'Open Sans', sans-serif; font-weight: 800; } #servicos .caix1 { display: block; width: 30%; position: relative; float: left; min-height: 100%; padding-top: 120px; } #servicos .caix1 hs2 { font-size: 42px; font-weight: 900; line-height: 1.1; text-transform: none; margin: 10px 0 12px; padding: 0px; text-align: left; font-family: 'Open Sans', sans-serif; background: linear-gradient( 180deg, #fefefe 1%, #f7f7f7 18%, #ededed 35%, #dcdcdc 50%, #f0f0f0 65%, #fafafa 80%, #d8d8d8 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30), 0 0 10px rgba(255, 255, 255, 0.45); } #servicos .caix1 hs2 c { color: #CB0505; text-shadow: none; font-size: 30px; } #servicos .caix1 text1 { color: #fff; font-size: 1.4rem; font-family: 'Open Sans', sans-serif; font-style: italic; position: relative; top: 20px; line-height: auto; } #servicos .caix2 { display: block; width: 65%; float: right; position: relative; padding-top: 50px; } #servicos .caix2 iten { display: block; width: 23%; height: 140px; background: #fff; position: relative; margin: 7px; float: left; font-family: 'Open Sans', sans-serif; color: #fff; padding: 0px; font-weight: 600; padding-top: 0px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.30), 0 0 10px rgba(255, 255, 255, 0.45); overflow: hidden; } #servicos .caix2 iten:hover { opacity: 0.5; } #servicos .caix2 iten txt { display: block; position: relative; line-height: 20px; padding: 10px; text-align: center; font-size: 18px; } #servicos .caix2 iten img1, #servicos .caix2 iten img2, #servicos .caix2 iten img3, #servicos .caix2 iten img4, #servicos .caix2 iten img5, #servicos .caix2 iten img6, #servicos .caix2 iten img7, #servicos .caix2 iten img8, #servicos .caix2 iten img9, #servicos .caix2 iten img10, #servicos .caix2 iten img11, #servicos .caix2 iten img12 { display: block; max-width: 100%; height: 130px; text-align: center; position: relative; background-size: contain; /* 👈 ajuste principal */ background-position: center; /* 👈 centraliza */ background-repeat: no-repeat; /* 👈 evita repetir */ } #servicos .caix2 iten img1 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log1.webp) top center no-repeat; } #servicos .caix2 iten img2 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log2.webp) top center no-repeat; } #servicos .caix2 iten img3 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log3.webp) top center no-repeat; } #servicos .caix2 iten img4 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log4.webp) top center no-repeat; } #servicos .caix2 iten img5 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log5.webp) top center no-repeat; } #servicos .caix2 iten img6 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log6.webp) top center no-repeat; } #servicos .caix2 iten img7 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log7.webp) top center no-repeat; } #servicos .caix2 iten img8 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log8.webp) top center no-repeat; } #servicos .caix2 iten img9 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log9.webp) top center no-repeat; } #servicos .caix2 iten img10 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log10.webp) top center no-repeat; background-size: 90%; } #servicos .caix2 iten img11 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log11.webp) top center no-repeat; } #servicos .caix2 iten img12 { background: url(https://rcpecasesuprimentos.com.br/wp-content/themes/xperama/images/log12.webp) top center no-repeat; } #servicos .caix2 iten:hover { display: block; background: #fff; color: #fff; } #servicos .caix2 iten:hover i { display: block; max-width: 100%; text-align: center; position: relative; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; overflow: hidden; } #servicos .caix2 iten:hover txt { display: block; position: relative; line-height: 20px; padding: 10px; text-align: center; font-size: 18px; } @media (max-width: 980px) { #servicos { height: auto !important; min-height: auto !important; overflow: visible !important; padding: 30px 12px !important; } #servicos .caix1, #servicos .caix2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 auto !important; } #servicos .caix2 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; max-width: 360px !important; margin-top: 50px !important; } #servicos .caix2 iten { width: 100% !important; height: 68px !important; margin: 0 !important; float: none !important; background: #fff !important; border: 1px solid #d9d9d9 !important; box-shadow: none !important; } #servicos .caix2 iten img1, #servicos .caix2 iten img2, #servicos .caix2 iten img3, #servicos .caix2 iten img4, #servicos .caix2 iten img5, #servicos .caix2 iten img6, #servicos .caix2 iten img7, #servicos .caix2 iten img8, #servicos .caix2 iten img9, #servicos .caix2 iten img10, #servicos .caix2 iten img11, #servicos .caix2 iten img12 { width: 100% !important; height: 100% !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 82% auto !important; } } /* -- Onde Chegar -- */ #orcamento{ display:block; width:100%; height:auto; max-height:none; text-align:center; position:relative; margin:0 auto 100px auto; margin-top:0; box-sizing:border-box; } #orcamento hs22{ font-size:42px; font-weight:900; line-height:1.1; text-transform:none; margin:10px 0 12px; padding:0; text-align:left; font-family:'Open Sans', sans-serif; background:linear-gradient( 180deg, #fefefe 1%, #f7f7f7 18%, #ededed 35%, #dcdcdc 50%, #f0f0f0 65%, #fafafa 80%, #d8d8d8 100% ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 2px 2px rgba(0,0,0,0.30), 0 0 10px rgba(255,255,255,0.45); } #orcamento .bots{ display:inline-block; position:relative; margin:20px; font-size:15px; font-family:'Open Sans', sans-serif; font-weight:600; } #orcamento .bots a{ padding:10px 20px; border-radius:3px; background:#fff; color:#CB0505; font-weight:800; transition:all 600ms ease; } #orcamento .bots a:hover{ color:#fff; background:#030F27; letter-spacing:0.1px; transition:all 600ms ease; } /* CONTAINER DAS COLUNAS */ #orcamento .duvidas{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; width:100%; margin-top:30px; box-sizing:border-box; } #orcamento .duvidas .esquerda, #orcamento .duvidas .direita{ width:50%; box-sizing:border-box; } /* ITEM */ #orcamento .faq-item{ width:100%; display:block; margin-bottom:20px; box-sizing:border-box; } /* CABEÇALHO CLICÁVEL */ #orcamento .ocultar{ width:100%; margin-bottom:0; float:none; box-sizing:border-box; } /* TÍTULO DA PERGUNTA */ #orcamento .ocultar .perg{ display:flex; align-items:center; gap:10px; position:relative; width:100%; padding:16px 20px; box-sizing:border-box; font-size:16px; font-weight:600; color:#fff; cursor:pointer; text-align:left; background:linear-gradient(145deg,#2a2a2a,#111); border:1px solid #555; border-radius:6px; box-shadow: inset 0 1px 3px rgba(255,255,255,0.1), 0 6px 15px rgba(0,0,0,0.8); transition:all .3s ease; overflow:hidden; border-radius: 87px 16px 68px 12px; -webkit-border-radius: 87px 16px 68px 12px; -moz-border-radius: 87px 16px 68px 12px; } /* LINHA LARANJA SEMPRE VISÍVEL NO TÍTULO */ #orcamento .ocultar .perg::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:linear-gradient( 90deg, transparent, #ffffff, #e8e8e8, #cfcfcf, #f8f8f8, #ffffff, transparent ); box-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 12px rgba(200,200,200,0.6); } /* ÍCONE */ #orcamento .ocultar .perg .ic{ color:#9aa0a6; flex-shrink:0; margin-left:12px; font-size:16px; line-height:1; position:relative; z-index:2; } /* TEXTO */ #orcamento .ocultar .perg .texto{ flex:1; text-align:left; position:relative; z-index:2; padding-right:10px; } /* SINAL + */ #orcamento .ocultar .perg .sinal{ margin-left:auto; color:#ff7a00; font-size:24px; font-weight:700; line-height:1; flex-shrink:0; position:relative; z-index:2; } /* QUANDO ESTIVER ABERTO, TROCA + POR - */ #orcamento .faq-item.active .perg .sinal{ font-size:0; } #orcamento .faq-item.active .perg .sinal::before{ content:"-"; font-size:24px; font-weight:700; line-height:1; color:#ff7a00; } /* HOVER */ #orcamento .ocultar .perg:hover{ border-color:#777; box-shadow: inset 0 1px 3px rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.85); } /* CONTEÚDO */ #orcamento .mostrar{ width:100%; padding:18px 20px; box-sizing:border-box; font-size:14px; font-family:'Open Sans',sans-serif; color:#d0d0d0; line-height:24px; background:#0b0b0b; border-left:2px solid #ff7a00; margin-top:14px; margin-bottom:0; display:none; float:none; text-align:center; } /* TEXTO EM NEGRITO */ #orcamento .mostrar b{ color:#e5e5e5; font-weight:700; } /* RESPONSIVO */ @media (max-width: 768px){ #orcamento{ margin-bottom:60px; } #orcamento .duvidas{ flex-direction:column; gap:20px; } #orcamento .duvidas .esquerda, #orcamento .duvidas .direita{ width:100%; } #orcamento .ocultar .perg{ padding:14px 16px; font-size:15px; } #orcamento .ocultar .perg .sinal{ font-size:22px; } #orcamento .faq-item.active .perg .sinal::before{ font-size:22px; } #orcamento .mostrar{ padding:16px; font-size:14px; line-height:22px; } } /* -- Diferenciais -- */ .atua{width: 100%; position: relative; display: block; height: 600px; overflow: hidden; margin-top:0px;margin-bottom: 0px; } .atua h2{display: block; text-align: left; margin-top: 20px; font-size: 2.4rem; color: #cb0505; font-family: 'Open Sans', sans-serif; font-weight: 800; } .atua .caix2{display: block; width: 40%; position: relative; float: right; min-height: 100%; padding-top: 150px; } .atua .caix2 hs2{display: inline-block; font-size: 3.5rem; font-weight: 800; line-height: 32px; text-transform: normal; font-family: 'Open Sans', sans-serif; top: 150px; font-style: italic; color: #030F27; } .atua .caix2 hs2 c{color: #CB0505; font-size: 2.5rem; line-height: 10px; } .atua .caix2 text1 {color: #5a5a5a; font-size: 1.4rem; font-family: 'Open Sans', sans-serif; font-style: italic; position: relative; top: 20px; line-height: auto; } .atua .caix1 {display: block; width: 50%; float: left; position: relative; background: url(images/atuacao-mapa.png) top center no-repeat; background-size: 95%; height: 700px; padding-top: 50px; } /* -- Numeros -- */ .num{width: 100%; position: relative; display: block; height: 270px; overflow: hidden; margin-top:50px; margin-bottom: 0px; } .num caix1 {display: block; float: left; width: 20%; float: left; position: relative; height: 130px; margin: 10px; text-align: center; font-size: 1.2rem; font-weight: 600; letter-spacing: 4px; padding: 30px 15px 30px 20px; background: rgba(10, 12, 18, .75); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(10px); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30), 0 0 10px rgba(255, 255, 255, 0.45); border-radius: 3px; } .num caix1 c{color: #aaaaaa; font-weight: 900; font-size: 4.7rem; letter-spacing: -3px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30), 0 0 10px rgba(255, 255, 255, 0.45);} /* RESPONSIVO NUMEROS */ /* Notebook menor / Tablet */ @media screen and (max-width: 1024px) { .num { height: auto; overflow: visible; text-align: center; } .num caix1 { width: 45%; height: auto; margin: 10px; float: none; display: inline-block; vertical-align: top; } } /* Celular */ @media screen and (max-width: 768px) { .num caix1 { width: 90%; margin: 10px auto; display: block; } } /* Celular pequeno */ @media screen and (max-width: 480px) { .num caix1 { width: 95%; margin: 10px auto; } .num caix1 c { font-size: 3.5rem; } } #orcamentos{display: block; width: 100%; height: 300px; max-height: 300px; text-align: center; position: relative; margin: 0 auto; border-radius: 3px; margin-bottom: 100px; position: relative; margin-top: 40px; padding: 20px 0; background: url('images/fundo-sobre.png') center center / cover no-repeat; background-attachment: fixed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 20px 30px rgba(255, 255, 255, 0.03), inset 0 -20px 30px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.45);} /* OVERLAY ESCURO */ #orcamentos::before { content: ""; position: absolute; inset: 0; background: rgba(11,13,16,0.88); z-index: 0; } #orcamentos hs22{display: block; text-align: center; font-weight: 800; font-size: 25px; color: #fff; padding-top: 90px; margin: 0 auto; } #orcamentos .bots{display: inline-block; position: relative; margin: 20px; font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; } #orcamentos .bots a{ display: inline-flex; align-items: center; justify-content: center; top: 20px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; border-radius: 999px; border: 1px solid #ff9a2f; background: linear-gradient(180deg, #ffb85c 0%, #ff9a2f 40%, #ff7a00 65%, #e06a00 100%); box-shadow: 0 6px 16px rgba(255, 138, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.25); border-radius: 156px 0px 131px 7px; -webkit-border-radius: 156px 0px 131px 7px; -moz-border-radius: 156px 0px 131px 7px; transition: all .25s ease; } #orcamentos .bots a:hover{color: #000; background: #eeeeee; letter-spacing: 0.1px; transition: box-shadow .5s; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } /* -- Social -- */ #social ul.social {margin: auto; padding: 0px; display: table; position: relative; z-index: 9999; } #social ul.social li {list-style-type: none; display: inline-block; text-align: center; vertical-align: middle; text-decoration:none; } #social ul.social li a { text-decoration:none; font-size: 16px; color:#1C2B35; padding: 5px; background: #fff; width: 16px; border-radius: 100%; margin: 0 5px; display: inline-block;} #social ul.social li a:hover {color:#ffa14b; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; cursor: pointer; transform: rotate(360deg); transition: all 0.9s ease-in-out 0s; } #social ul.social li a img {margin-top: 6px;} #social ul.socialtwo { display: block; float: right; text-align: right; position: relative; margin: 0 auto;} #social ul.socialtwo li {list-style-type: none; display: inline-block; text-align: center; top: 0px; vertical-align: middle;} #social ul.socialtwo li a {font-size: 30px; width: 30px; height: 30px; border: 2px solid #ff8d00; color: #fff; border-radius: 40px; margin: 0 4px; padding: 10px; display: inline-block;} #social ul.socialtwo li a:hover {color:#ff8d00; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } #social ul.socialtwo li a img {margin-top: 6px;} /* -- Final widgets -- */ .final{ background: transparent; position: relative; display: block; overflow: hidden; width: 100%; height: auto; margin-top: 0px; margin-bottom: 0px; } .final titulo {margin: 0 2px;color: #ae0a19; font-family: open sans; text-transform: uppercase; font-weight: 800; font-family: 14px; -webkit-box-shadow: #fff 0 -6px inset;box-shadow: #fff 0 -6px inset; border-radius: 1px; margin-left: 620px; } .final .log{background: url(images/logo.png) no-repeat; margin: 10px; background-size: 90%; width: 200px; height: 100px; } .final #social ul.socialtwo { float: left; left: 50px; top: 0px; padding: 0px; display: table; z-index: 999999; position: relative; } .final #social ul.socialtwo li a {font-size: 14px; width: 14px; color: #fff; margin: 0 4px; padding: 10px; border-radius: 100%; display: inline-block;} .final .text{display: block; padding: 25px 0 15px 0 !important;}} /* -- Footer e creditos -- */ .footer-info{ background: transparent; width: 100%; height: auto; overflow: hidden; margin-top: 0px; display: block; } .footer-info .creditos {position: relative; cursor:pointer; font-family: 'open sans', sans-serif; font-weight: 500; letter-spacing: 1px; color: #fff; border-top: 1px solid #aaa; padding-top: 20px; font-size: 9px; line-height: 20px; text-align: left; padding-right: 60px; height: 60px; } .footer-info .creditos .logo{background: url(images/.png) top right no-repeat; background-size: 80%; height: 30px; width: 50px; line-height: 30px; right: 0px; top: -5px; float:right; } .footer-info .creditos a { color: #fff; } .footer-info .creditos a:hover { color: #000;} #entre{display: block; height: 170px; margin: 0 auto; overflow: hidden; position: relative; background: transparent;} #entre caix{display: block; width: 50%; float: left; height: auto; position: relative; top: 70px; overflow: hidden; } #entre caix .cotacao{display: inline-block; position: relative; font-weight: 800; padding: 14px 20px 14px 20px; line-height: 20px; margin: 0 auto; } #entre caix .cotacao a{ display: inline-flex; align-items: center; justify-content: center; top: 20px; padding: 16px 40px; font-size: 14px; font-weight: 800; color: #fff; text-decoration: none; border-radius: 999px; border: 1px solid #ff9a2f; background: linear-gradient(180deg, #ffb85c 0%, #ff9a2f 40%, #ff7a00 65%, #e06a00 100%); box-shadow: 0 6px 16px rgba(255, 138, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.25); border-radius: 156px 0px 131px 7px; -webkit-border-radius: 156px 0px 131px 7px; -moz-border-radius: 156px 0px 131px 7px; transition: all .25s ease; } #entre caix .cotacao a:hover{color: #000; background: #eeeeee; letter-spacing: 0.1px; transition: box-shadow .5s; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } /* Font Awesome */ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"); .rc-footer { color: #ffffff; padding: 10px 10px 10px; font-family: Arial, Helvetica, sans-serif; } .rc-footer-line { width: 100%; height: 1px; background: rgba(255,255,255,.20); margin: 20px 0; } .rc-footer-main { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1.1fr; gap: 60px; align-items: start; } .rc-footer-col h3 { font-size: 20px; color: #9f9f9f; margin: 0 0 28px; font-weight: 800; } .rc-logo { width: 190px; margin-bottom: 28px; display: block; } .rc-brand p { color: #d5d5d5; font-size: 12px; line-height: 1.65; margin: 0 0 26px; } .rc-mini-card { border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; display: flex; gap: 16px; align-items: flex-start; } .rc-mini-card i { color: #ff7800; font-size: 25px; } .rc-mini-card strong { display: block; font-size: 14px; margin-bottom: 7px; } .rc-mini-card span { display: block; color: #c7c7c7; font-size: 15px; line-height: 1.5; } .rc-link-list { list-style: none; padding: 0; margin: 0; } .rc-link-list li { border-bottom: 1px solid rgba(255,255,255,.18); } .rc-link-list a { color: #ccc; text-decoration: none; font-size: 15px; font-weight: 700; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; transition: .3s ease; } .rc-link-list a:hover { color: #fff; padding-left: 8px; } .rc-diferencial { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.18); padding: 15px 0; } .rc-diferencial i { color: #ff7800; font-size: 20px; min-width: 38px; text-align: center; } .rc-diferencial span { color: #f3f3f3; font-size: 15px; } .rc-diferencial.sem-linha { border-bottom: none; } .rc-contato { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; } .rc-contato i { color: #ff7800; font-size: 25px; min-width: 28px; text-align: center; margin-top: 3px; } .rc-contato i.whatsapp { color: #00c853; } .rc-contato span { color: #f1f1f1; font-size: 15px; line-height: 1.45; } .rc-benefits { margin-top: 45px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.13); border-radius: 13px; padding: 32px 35px; display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: inset 0 0 35px rgba(255,255,255,.03); } .rc-benefit { display: flex; align-items: center; gap: 18px; padding: 0 28px; border-right: 1px solid rgba(255,255,255,.18); } .rc-benefit:first-child { padding-left: 0; } .rc-benefit:last-child { border-right: none; padding-right: 0; } .rc-benefit i { color: #ff7800; font-size: 25px; min-width: 45px; text-align: center; } .rc-benefit strong { display: block; font-size: 12px; color: #fff; margin-bottom: 8px; } .rc-benefit span { color: #cfcfcf; font-size: 15px; } .rc-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 35px; } .rc-footer-bottom p { color: #c8c8c8; font-size: 15px; margin: 0 0 3px; } .rc-bottom-links { display: flex; align-items: center; gap: 25px; } .rc-bottom-links a { color: #e1e1e1; text-decoration: none; font-size: 15px; transition: .3s ease; } .rc-bottom-links a:hover { color: #ff7800; } .rc-bottom-links span { color: #ff7800; } /* RESPONSIVO TABLET */ @media (max-width: 1100px) { .rc-footer { padding: 35px 28px; } .rc-footer-main { grid-template-columns: repeat(2, 1fr); gap: 45px; } .rc-benefits { grid-template-columns: repeat(2, 1fr); gap: 0; } .rc-benefit { border-right: none; border-bottom: 1px solid rgba(255,255,255,.18); padding: 25px 20px; } .rc-benefit:nth-child(3), .rc-benefit:nth-child(4) { border-bottom: none; } .rc-benefit:first-child { padding-left: 20px; } .rc-benefit:last-child { padding-right: 20px; } } /* RESPONSIVO CELULAR */ @media (max-width: 700px) { .rc-footer { padding: 30px 20px; } .rc-footer-top { flex-direction: column; align-items: flex-start; } .rc-btn-orcamento { width: 100%; padding: 18px 20px; font-size: 14px; border-radius: 16px; } .rc-social { width: 100%; justify-content: center; margin-top: 12px; } .rc-social a { width: 48px; height: 48px; font-size: 22px; } .rc-footer-main { grid-template-columns: 1fr; gap: 38px; } .rc-logo { width: 160px; } .rc-brand p { font-size: 15px; } .rc-footer-col h3 { font-size: 18px; margin-bottom: 20px; } .rc-link-list a { font-size: 16px; } .rc-diferencial span, .rc-contato span { font-size: 16px; } .rc-benefits { grid-template-columns: 1fr; padding: 20px; } .rc-benefit { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.18); } .rc-benefit:first-child { padding-left: 0; } .rc-benefit:last-child { padding-right: 0; border-bottom: none; } .rc-benefit:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,.18); } .rc-footer-bottom { flex-direction: column; align-items: flex-start; } .rc-bottom-links { flex-wrap: wrap; gap: 12px 18px; } } /* CELULAR PEQUENO */ @media (max-width: 420px) { .rc-footer { padding: 25px 16px; } .rc-btn-orcamento { font-size: 13px; } .rc-contato, .rc-diferencial, .rc-benefit { gap: 14px; } .rc-benefit i, .rc-diferencial i { font-size: 30px; } } /* -- caixinhas index -- */ .indexbox { width: 100%; height: auto; position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 20px; display: block; padding-bottom: 10px; } .indexbox .box { width: 1200px; height: auto; position: relative; display: block; margin: 10px auto; } .indexbox .caixinha { padding: 0px;line-height: 24px;font-size: 13px; vertical-align: top; font-family: 'open sans', sans-serif; color: #666; display: inline-block; margin-left: 20px; margin-right: 20px; margin-top: 30px; position: relative; width: 20%; height: auto; text-align: justify; } .indexbox .caixinha .title { font-family: 'poppins', sans-serif; color: #fff; text-transform: uppercase; font-size: 18px; display: block; margin: 10px 0 25px 0; border-bottom: 1px dotted #870404; } .indexbox .caixinha .title c{ font-weight: 800; font-family: 'open sans', sans-serif; font-size: 14px; display: inline-block;border-bottom: 2px solid #fff; padding-bottom: 5px; margin-bottom: -2px; color: #fff; } .indexbox .caixinha .quadro{ border: 1px solid #382741; padding: 20px; } .caixinhaslide{display: block; width: 100%; height: 500px; background: transparent; margin: auto; overflow: hidden; position: relative; z-index: 1000000; } /* -- Search -- */ #search { width: 90%; margin-top: 20px; margin-bottom: 20px; border-radius: 20px; z-index: 99999; position: relative; padding: 3px; display: block; } #search form {} #search fieldset {margin: 0;padding: 0;border: none; background: transparent;} #search p {margin: 0;font-size: 85%;} #s { width: 75%; font-family: 'poppins', sans-serif; background: transparent; margin-top: 0px; font-style: italic; font-size: 13px; color: #8C8C8C; letter-spacing: 0px; margin-left: 35px; display: block; } #s:focus { } #searchsubmit {font-weight: 500; font-family: 'poppins', sans-serif; background: url(images/lupa.png) no-repeat; border:none; color:#a9a1b0; height: 36px; display: inline-block; border-radius: 13px; left: 0px; cursor:pointer; width: 36px; position: absolute; top: -3px; margin-top: 0px; text-transform: uppercase; font-size: 0px;} #search2 { width: 200px; border-radius: 30px; float: right; right: 0px; top: 10px; margin-bottom: 20px; z-index: 9999; position: relative; padding: 3px; display: block; } /* BASE */ .form { display: block; width: 100%; position: relative; margin: 0; } .formu { width: 100%; margin: 0 auto; position: relative; } /* CAMPOS */ .formu .box, .formu .boxdois { width: 95%; position: relative; display: block; margin-bottom: 12px; } /* INPUT / TEXTAREA */ .formulario { width: 100%; padding: 16px; border-radius: 10px; border: 1px solid #2a2d31; background: #1a1d21; color: #fff; font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 500; outline: none; transition: 0.3s; } /* FOCUS */ .formulario:focus { border-color: #ff8c00; box-shadow: 0 0 0 1px #ff8c00; } /* TEXTAREA */ .formu textarea.formulario { min-height: 120px; resize: none; } /* BOTÃO CONTAINER */ .bot { width: 100%; display: block; } /* BOTÃO */ .bot .botao { width: 100%; height: auto; padding: 16px; border-radius: 10px; border: none; background: linear-gradient(90deg, #ff8c00, #ffa500); color: #000; font-size: 15px; font-weight: 800; text-align: center; cursor: pointer; transition: 0.3s; } /* HOVER */ .bot .botao:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,140,0,0.4); } /* TEXTO ATENÇÃO */ .atencao { margin-top: 15px; text-align: center; } .atencao .c { text-transform: uppercase; font-family: 'Open Sans', sans-serif; color: #777; font-size: 11px; line-height: 1.4; } .parallax {height: auto;background: url(/web/20180629034657im_/http://priim.com.br/wp-content/themes/Priim%20-%20Vers%C3%A3o%20Rosa/images/bg.png) 50% 0 fixed; background-repeat: no-repeat; background-size: cover;position: relative;} .parallaxsingle {height: auto;} /* ================= BASE ================= */ #contato { position: relative; margin-top: 40px; padding: 80px 0; background: url('images/fundo-sobre.png') center center / cover no-repeat; background-attachment: fixed; } /* OVERLAY ESCURO */ #contato::before { content: ""; position: absolute; inset: 0; background: rgba(11,13,16,0.88); z-index: 0; } /* CONTEÚDO NA FRENTE */ #contato #page-total { position: relative; z-index: 2; width: 90%; max-width: 1200px; margin: 0 auto; display: flex; gap: 50px; align-items: stretch; } /* COLUNAS */ #contato .caix1, #contato .caix2 { width: 80%; } /* ================= ESQUERDA ================= */ #contato .caix1 { background: linear-gradient(145deg, #111418, #0b0d10); border-radius: 16px; padding: 40px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 15px 40px rgba(0,0,0,0.6); } #contato caix12 tex { display: block; font-size: 20px; font-weight: 800; color: #fff; } #contato caix12 tex span { color: #ff8c00; } #contato caix12 tex p { color: #aaa; font-size: 15px; font-weight: 700; margin-top: 10px; } /* CARDS */ #contato caix12 caiis { display: block; padding: 18px; margin-top: 18px; border-radius: 12px; background: #111; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; } #contato caix12 caiis:hover { border-color: #ff8c00; box-shadow: 0 0 20px rgba(255,140,0,0.15); } /* FLEX */ #contato caix12 caiis cs { display: flex; gap: 18px; align-items: flex-start; } /* ICON */ #contato caix12 caiis cs i { width: 60px; height: 60px; min-width: 60px; border-radius: 12px; border: 1px solid rgba(255,140,0,0.4); color: #ff8c00; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,140,0,0.05); transition: 0.3s; } #contato caix12 caiis:hover cs i { background: #ff8c00; color: #000; transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(255,140,0,0.35); } /* TEXTO */ .info { display: flex; flex-direction: column; gap: 4px; } .info span { font-size: 13px; color: #fff; font-weight: 800; } .info c { font-size: 16px; color: #ff8a00; font-weight: 600; } .info small { font-size: 13px; color: #777; font-weight: 600; } /* MINI BAR */ .mini-bar { display: flex; justify-content: space-between; margin-top: 30px; } /* ================= DIREITA ================= */ .form-card { background: linear-gradient(145deg, #111418, #0b0d10); padding: 40px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 15px 40px rgba(0,0,0,0.6); } .form-card h3 { color: #fff; } .form-card p { color: #aaa; margin-bottom: 20px; } /* ================= SEU FORM (PRESERVADO) ================= */ .form { width: 100%; margin-top: 20px; } .formu { width: 100%; } /* INPUT */ .formulario { width: 100%; padding: 16px; border-radius: 10px; border: 1px solid #2a2d31; background: #1a1d21; color: #fff; font-size: 14px; transition: 0.3s; } .formulario:focus { border-color: #ff8c00; box-shadow: 0 0 0 1px #ff8c00; } /* BOTÃO */ .bot .botao { width: 100%; padding: 16px; background: linear-gradient(90deg, #ff8c00, #ffa500); border-radius: 10px; color: #000; font-weight: 800; transition: 0.3s; } .bot .botao:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,140,0,0.4); } /* TEXTO */ .atencao { margin-top: 15px; text-align: center; } .atencao .c { font-size: 11px; color: #777; } /* ================= MOBILE CONTATO ================= */ @media (max-width: 980px) and (max-width: 1190px) { #contato { height: auto !important; min-height: auto !important; overflow: visible !important; padding-bottom: 50px; margin: 0px auto; } #contato #page-total { display: flex !important; flex-direction: column !important; align-items: stretch !important; height: auto !important; min-height: auto !important; overflow: visible !important; gap: 25px; margin: 0px auto; } #contato .caix1, #contato .caix2 { width: 100% !important; height: auto !important; min-height: auto !important; float: none !important; display: block !important; position: relative !important; overflow: visible !important; clear: both !important; font-size: 15px; } #contato .caix1 { margin-bottom: 25px !important; left: -10%; } #contato .caix2 { margin-top: 0 !important; left: -10%; } #contato caix12 { display: block !important; height: auto !important; overflow: visible !important; } #contato caix12 caiis { display: block !important; height: auto !important; min-height: auto !important; overflow: visible !important; } .mini-bar { display: flex !important; position: relative !important; width: 100% !important; margin-top: 25px !important; height: auto !important; overflow: visible !important; flex-wrap: wrap; gap: 12px; } .form-card { position: relative !important; width: 90% !important; height: auto !important; overflow: visible !important; margin-top: 0 !important; } #contato caix12 caiis cs i { width: 30px; height: 30px; min-width: 30px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.4); color: #ff8c00; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(255, 140, 0, 0.05); transition: 0.3s; } /* RESPONSIVO */ @media (max-width: 768px) { .mini-bar { flex-direction: column; align-items: flex-start; gap: 18px; } .info span { font-size: 12px; } .info c { font-size: 12px; } .info small { font-size: 12px; } } @media (max-width: 480px) { .mini-bar { width: 100%; margin-top: 22px; } .info { width: 100%; } .info span, .info small { font-size: 12px; } .info c { font-size: 14px; } } } /****** ------------------ Responsivo ------------------ ********/ @media only screen and (min-width: 240px) and (max-width: 980px) { html, body { overflow-x:hidden; background-position: top 0px center; position: relative; overflow-x: initial !important; } #page-total {margin: 0 auto; display: block; width: 100%; margin: 0px auto; position: relative; } #main {margin: 0 auto; width: 100%; position: relative; } #page-metade {margin: auto; width: 100%; padding-bottom: 10px; position: relative; } #page-metade2 {margin: auto; width: 100%; padding-bottom: 10px; position: relative; } .topo {display: block; position: relative; ...} .barra{display: block; ...} .logo{left: -90px; top:-20px;} .barrabotao {top:-90px; right:-40px; float:right;} .info c { font-size: 14px; color: rgb(255, 138, 0); font-weight: 600; } /*========================================*/ /*------------ [_Reset_Styles] -----------*/ /*========================================*/ * { margin: 0px; padding: 0px; border: none; outline: none !important; } ::-webkit-scrollbar { background-color: #fff; width: 10px; } ::-webkit-scrollbar-thumb { background-color: #eeeeee; } .caixinhaslide {display: block; width: 100%; height: 200px; background: transparent; overflow: hidden; position: relative; z-index: 100000; top: 5px; margin: 0 auto;} /* -- Slide -- */ .slide {display: block; width: 100%; margin: auto; position: relative; height: 200px; padding-left: 10px; overflow: hidden; } .slide img { width: 100%; height: auto; } .slide .photo { width: 100%; height: auto; } .slide .photo img { width: 100%; height: auto; background-size: 50%; background-position: top center; } .slide .photo .texto{display: block; max-width: 1000px; margin: auto; position: relative; height: auto; } .slide .photo .texto .um{font-family: 'open sans'; position: absolute; z-index: 100; color: #fff; letter-spacing: -2px; font-size: 50px; bottom: 155px; font-weight: 800;} .slide .photo .texto .dois{font-family: 'open sans'; position: absolute; z-index: 100; letter-spacing: -5px; font-size: 50px; bottom: 110px; font-weight: 800; padding-left: 0px;padding-right: 20px; color: #fff; } .slide .photo .texto .tres{font-family: 'open sans'; position: absolute; z-index: 100; letter-spacing: -5px; font-size: 50px; bottom: 62px; font-weight: 800; color: #CB0505; } .slide .photo .texto .quatro{font-family: 'open sans'; position: absolute; z-index: 100; letter-spacing: -5px; font-size: 42px; bottom: 114px; font-weight: 800; padding-left: 0px;padding-right: 20px; color: #fff; } .slide .photo .texto .infos{font-family: 'open sans'; position: absolute; color: #fff; z-index: 100; font-size: 15px; bottom: 20px; line-height: 22px; } .area{ height: auto; margin-top: 20px; display:block; position: relative; width:100%; } aside#sidebar{ max-width: 320px; margin: auto; margin-bottom: 10px; position: relative; float: none; overflow-x: hidden; overflow-y: hidden; } destaque {width: 100%; position: relative; height: auto; margin: 30px auto; } .comments-area { margin: 40px auto; width: 320px; height: auto; font-size: 12px;} .final{position: relative; display: block; margin: 0px auto; overflow: hidden; width: 100%; height: auto;margin-bottom: 0px;} .final .logo {background: url(images/logofinal.svg) top center no-repeat; display: block; background-size: 50%; width: 100%; top: 20px; left: 0px; margin: 0 auto; height: 120px;} .footer-info{ background: #CB0505; width: 100%; height: 100px; overflow: hidden; margin-top: 0px; display: block; } .footer-info .creditos {position: relative; cursor:pointer; font-family: 'open sans', sans-serif; font-weight: 500; letter-spacing: 1px; color: #fff; border-top: 1px solid #F12828; padding-top: 20px; font-size: 9px; line-height: 10px; text-align: center; padding: 10px; height: auto; } .footer-info .creditos .logo{display: block; background: url(images/logojo.svg) top center no-repeat; background-size: 10%; width: 100%; height: 30px; top: 10px; text-align: center; margin: 0 auto; padding-right: 0px; position: relative; left: 0px; } .footer-info .creditos a { color: #fff; } .footer-info .creditos a:hover { color: #000;} .post-single{width: 100%; position: relative; height: auto; margin: auto; margin-bottom: 100px; } .post-single .postdestacada img{ margin: 0px auto; width: 100%; height: auto; position: relative; } .links{ font-size: 9px; padding-left: 5px; background-size: 15%; } .postsrelacionados {position: relative; display: block; margin: auto; padding: 0px; overflow: hidden; width: 100% } .relacionados {position: relative; float: left; width: 30%; height: auto; border-radius: 3px; overflow: hidden; margin: 5px; float: left; } .relacionados img{width: 100%; height: auto; } .h2{ margin: auto; width: 100%; text-align: center; display: inline-block; padding: 5px; border-radius: 0px; color: #262626; margin-top: 20px; margin-bottom: 10px; position: relative; font-family: 'lato', serif; font-size: 16px; z-index: 10; } .comments-area { margin: 30px auto; width: 80%; padding: 20px; font-size: 13px; } /* -- Sobrenos -- */ #sobrenos{position: relative; display: block; height: auto; padding-bottom: 40px; margin-top: 20px; margin-bottom: 50px; } #sobrenos caix1{display: inline-block; width: 50%; background: transparent; min-height: 100%; float: left; position: relative; } #sobrenos caix2{display: inline-block; width: 50%; min-height: 100%; position: relative; } #sobrenos logo{display: inline-block; width: 100%; height: 80px; align-content: center; background: url(images/logo2.svg) top center no-repeat; min-height: 100%; margin-top: 80px;} #sobrenos texto{display: inline-block; padding: 20px; padding-top: 20px; text-align: left; color: #5a5a5a; line-height: 1.6em; font-size: 1.1rem; } #sobrenos .bots{display: inline-block; position: relative; margin: 10px; font-size:10px; font-family: 'Open Sans', sans-serif; font-weight: 600; } #sobrenos .bots a{padding: 10px 20px 10px 20px; border-radius: 50px; background: #CB0505; color: #fff; font-weight: 800; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease;} #sobrenos .bots a:hover{color: #fff; background: #030F27; letter-spacing: 0px; transition: box-shadow .5s; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } /* -- Diferenciais -- */ .atua{width: 100%; position: relative; display: block; height: auto; overflow: hidden; margin-top:0px;margin-bottom: 0px; } .atua h2{display: block; text-align: center; margin-top: 20px; font-size: 2.4rem; color: #cb0505; font-family: 'Open Sans', sans-serif; font-weight: 800; margin: 0 auto; } .atua .caix2{display: block; width: 100%; position: relative; float: right; min-height: 100%; padding-top: 10px; margin: 0 auto; } .atua .caix2 hs2{display: block; width: 80%; font-size: 3.5rem; font-weight: 800; line-height: 32px; text-transform: normal; font-family: 'Open Sans', sans-serif; top: 150px; font-style: italic; color: #030F27; margin: 0 auto; } .atua .caix2 hs2 c{color: #CB0505; font-size: 2.5rem; line-height: 10px; } .atua .caix2 text1 {color: #5a5a5a; display: block; width: 80%; font-size: 1.4rem; font-family: 'Open Sans', sans-serif; font-style: italic; position: relative; top: 20px; line-height: auto; margin: 0 auto; } .atua .caix1 {display: block; width: 100%; float: left; position: relative; background: url(images/atuacao-mapa.png) top center no-repeat; background-size: 95%; height: 400px; padding-top: 10px; } #entre{display: block; height: 200px; margin: 0 auto; overflow: hidden; position: relative;} #entre caix{display: block; width: 100%; margin: 0 auto; height: auto; text-align: center;position: relative; top: 30px; overflow: hidden; } #entre caix .cotacao{display: inline-block; position: relative; font-weight: 800; padding: 14px 20px 14px 20px; line-height: 20px; margin: 0 auto; } #entre caix .cotacao a{ display: inline-flex; align-items: center; justify-content: center; top: 20px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; border-radius: 999px; border: 1px solid #ff9a2f; background: linear-gradient(180deg, #ffb85c 0%, #ff9a2f 40%, #ff7a00 65%, #e06a00 100%); box-shadow: 0 6px 16px rgba(255, 138, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.25); border-radius: 156px 0px 131px 7px; -webkit-border-radius: 156px 0px 131px 7px; -moz-border-radius: 156px 0px 131px 7px; transition: all .25s ease; } #entre caix .cotacao a:hover{color: #000; background: #eeeeee; letter-spacing: 0.1px; transition: box-shadow .5s; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } #entre caix .cotacao i{display: inline-block; color: #fff; padding-left: 0px; left:0px; font-size: 20px; } #social ul.socialtwo {display: block; margin: 0 auto; top: 20px; height: 100px; float: none; text-align: center; z-index: 9999; position: relative; } } /* --- INICIO DO MENU --- */ /*Estilizando a nav da classe menu */ .menu {width: auto;margin-left: 0px;float: left;height: auto;font-family: poppins;font-size: 13px;text-transform: uppercase; position: relative;margin-top: -125px;left: 15%;} /*Estilizando as listas */ .menu ul {list-style: none;position: relative;} .menu ul li {margin: 30px; /* --- Importante */ float: left;} .menu a {display: inline-block; font-family: 'Open Sans', sans-serif; text-decoration: none;text-align: center;color: #fff;font-weight: 800; -webkit-transition: all ease-out 0.6s 0.1s; -moz-transition: all ease-out 0.6s 0.1s; -o-transition: all ease-out 0.6s 0.1s; -ms-transition: all ease-out 0.6s 0.1s; transition: all ease-out 0.2s 0.1s; } .menu a:hover { color: #c61e1e; } .menu c{ font-family:georgia; font-style: italic; color: #9135e6; text-transform: lowercase; font-size: 9px; } .menu ul ul { position: absolute;visibility: hidden;z-index: 999; } .menu ul li:hover ul {visibility: visible; } .menu ul ul li { float: none; } /* Estilizando os sub menus */ .menu ul ul li a { background-color: #F0F0F0; color: #656565; font-weight: 500; line-height: 30px; margin-top: 0px; font-size: 9px; } .menu ul ul li:after {content: ''; display: block; margin: 0px auto; height: 0px; width: 100%; background: #fff; transition: width .5s ease, background-color .5s ease;} .menu ul ul li:hover:after { width: 100%; } .menu ul ul li a:hover { color: #9c9c77; } /*Criando o label */ label[for="bt_menu"]{ padding: 10px; background-color: transparent;color: #000;font-family: poppins;text-align: center; font-size: 0px;cursor: pointer; display: none; } #bt_menu { display: none; color: #fff; } label[for="bt_menu"]{display: block; width: 50px;} /*Deixando o Menu Responsivo */ @media(max-width: 800px) { label[for="bt_menu"] { display: block; text-align: left; width: 93%; padding-left: 20px; height: 20px; border-radius: 0px; line-height: 18px; background-color: #CB0505; color: #fff; margin-top: 0px; margin-left: 0px; position: relative; font-size: 25px; left: 0%; z-index: 1000; top: 0%; cursor: pointer; margin: 0 auto; } label[for="bt_menu"]:hover { color: #000; cursor: pointer; } #bt_menu:checked ~ .menu{ margin: 0px; height: auto; padding-bottom: 20px; z-index: 1000; margin-bottom: 20px; background: #CB0505; width: 100%; margin-left: 0px; text-align: left; padding-left: 0px; } #bt_menu:checked ~ .menu a { display: block; margin: 5px; padding-left: 0px; margin-left: 0px; width: 100%; text-align: left; padding: 5px; border-bottom: 1px solid #880404; z-index: 1000; } #bt_menu:checked ~ .menu a:hover{ color: #000; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .menu{ margin-top: 5px; transition: all .4s; width: 90%; margin-right: 0; z-index: 1000; left: 0px; margin-left: 0px; height: 0px; overflow: hidden; padding-left: 0px; } .menu ul li { width: 100%; float: none; margin: 0px auto; } .menu ul ul { position: static; overflow: hidden; max-height: 0px; transition: all 4s; } .menu ul li:hover ul { height: auto; max-height: 200px; } .menu ul ul li a { width: 200px; margin: auto; } .menu li:after {display:none;} .menu li:hover:after { display:none;} } /* FIM DO MENU */ /****** ------------------ Responsivo ------------------ ********/ @media only screen and (min-width: 980px) and (max-width: 1190px) { html, body { overflow-x:hidden; background-position: top 0px center; position: relative; overflow-x: initial !important; } #page-total {margin: 0 auto; display: block; width: 100%; margin: 0px auto; position: relative; } #main {margin: 0 auto; width: 100%; position: relative; } #page-metade {margin: auto; width: 100%; padding-bottom: 10px; position: relative; } #page-metade2 {margin: auto; width: 100%; padding-bottom: 10px; position: relative; } /*========================================*/ /*------------ [_Reset_Styles] -----------*/ /*========================================*/ * { margin: 0px; padding: 0px; border: none; outline: none !important; } ::-webkit-scrollbar { background-color: #fff; width: 10px; } ::-webkit-scrollbar-thumb { background-color: #eeeeee; } .topo {display: block; position: relative; width: 100%; height: auto; padding-bottom: 5px; margin: 0 auto;} .logo{display: inline-block; background-size: 90%; max-height: 130px; left: -80px; margin: 0 auto; top: -20px; } .barra{display: block; max-height: 50px; height: auto; margin: 0 auto;position: relative; } .barrainfos { width: 95%; display: block; position: relative; height: auto; overflow: hidden; margin: 0 auto; margin-bottom: 20px;} .barrainfos .cs1 {width: 96%; display: block; height: auto; max-height: auto; position: relative; margin: 0 auto; margin: 6px; } .barrainfos .cs1 h1 {display: block; text-align: left; padding-left: 20px; font-size: 17px; padding-top: 10px;padding-bottom: 10px; color: #fff; font-weight: 700; font-family: 'Open Sans', sans-serif; letter-spacing: 1px;} .barrainfos .cs1 text {display: inline-block; position: relative; font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif; padding: 5px; padding-left: 20px; color: #fff; line-height: 20px; } /* BOTÃO "SOLICITAR ORÇAMENTO" */ .hero .barrabotao{ margin-left: auto; /* 🔥 empurra para o final da barra */ flex: 0 0 auto; display: flex; align-items: center; } /* botão em si */ .hero .barrabotao a{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 20px; border: 2px solid #CB0505; font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #fff; background: transparent; transition: background .25s ease, color .25s ease, transform .2s ease; } /* hover elegante */ .hero .barrabotao a:hover{ background: #CB0505; color: #fff; transform: translateY(-1px); } .area{ height: auto; margin-top: 20px; display:block; position: relative; width:100%; } aside#sidebar{ max-width: 320px; margin: auto; margin-bottom: 10px; position: relative; float: none; overflow-x: hidden; overflow-y: hidden; } destaque {width: 100%; position: relative; height: auto; margin: 30px auto; } .comments-area { margin: 40px auto; width: 320px; height: auto; font-size: 12px;} .final{position: relative; display: block; margin: 0px auto; overflow: hidden; width: 100%; height: auto;margin-bottom: 0px;} .final .logo {background: url(images/logofinal.svg) top center no-repeat; display: block; background-size: 30%; width: 100%; top: 20px; left: 0px; margin: 0 auto; height: 300px;} .footer-info{ background: #CB0505; width: 100%; height: 100px; overflow: hidden; margin-top: 0px; display: block; } .footer-info .creditos {position: relative; cursor:pointer; font-family: 'open sans', sans-serif; font-weight: 500; letter-spacing: 1px; color: #fff; border-top: 1px solid #F12828; padding-top: 20px; font-size: 9px; line-height: 10px; text-align: center; padding: 10px; height: auto; } .footer-info .creditos .logo{display: block; background: url(images/logojo.svg) top center no-repeat; background-size: 5%; width: 100%; height: 30px; top: 10px; text-align: center; margin: 0 auto; padding-right: 0px; position: relative; left: 0px; } .footer-info .creditos a { color: #fff; } .footer-info .creditos a:hover { color: #000;} .post-single{width: 100%; position: relative; height: auto; margin: auto; margin-bottom: 100px; } .post-single .postdestacada img{ margin: 0px auto; width: 100%; height: auto; position: relative; } .links{ font-size: 9px; padding-left: 5px; background-size: 15%; } .postsrelacionados {position: relative; display: block; margin: auto; padding: 0px; overflow: hidden; width: 100% } .relacionados {position: relative; float: left; width: 30%; height: auto; border-radius: 3px; overflow: hidden; margin: 5px; float: left; } .relacionados img{width: 100%; height: auto; } .h2{ margin: auto; width: 100%; text-align: center; display: inline-block; padding: 5px; border-radius: 0px; color: #262626; margin-top: 20px; margin-bottom: 10px; position: relative; font-family: 'lato', serif; font-size: 16px; z-index: 10; } .comments-area { margin: 30px auto; width: 80%; padding: 20px; font-size: 13px; } #entre{display: block; height: 200px; margin: 0 auto; overflow: hidden; position: relative; background: #19163B;} #entre caix{display: block; width: 100%; margin: 0 auto; height: auto; text-align: center;position: relative; top: 30px; overflow: hidden; } #entre caix .cotacao{display: inline-block; position: relative; font-weight: 800; background: #CB0505; border: 2px solid #CB0505; padding: 14px 20px 14px 20px; line-height: 20px; margin: 0 auto; } #entre caix .cotacao a{ color: #fff; padding-right: 20px; margin: 0 auto; font-size: 15px;} #entre caix .cotacao i{display: inline-block; color: #fff; padding-left: 0px; left:0px; font-size: 20px; } #entre caix .cotacao:hover{background: #030F27; padding-right: 20px; font-size: 15px;} #social ul.socialtwo {display: block; margin: 0 auto; top: 20px; height: 100px; float: none; text-align: center; z-index: 9999; position: relative; } /* -- Diferenciais -- */ .atua{width: 100%; position: relative; display: block; height: auto; overflow: hidden; margin-top:0px;margin-bottom: 0px; } .atua h2{display: block; text-align: center; margin-top: 20px; font-size: 2.4rem; color: #cb0505; font-family: 'Open Sans', sans-serif; font-weight: 800; margin: 0 auto; } .atua .caix2{display: block; width: 100%; position: relative; float: right; min-height: 100%; padding-top: 10px; margin: 0 auto; } .atua .caix2 hs2{display: block; width: 80%; font-size: 3.5rem; font-weight: 800; line-height: 32px; text-transform: normal; font-family: 'Open Sans', sans-serif; top: 150px; font-style: italic; color: #030F27; margin: 0 auto; } .atua .caix2 hs2 c{color: #CB0505; font-size: 2.5rem; line-height: 10px; } .atua .caix2 text1 {color: #5a5a5a; display: block; width: 80%; font-size: 1.4rem; font-family: 'Open Sans', sans-serif; font-style: italic; position: relative; top: 20px; line-height: auto; margin: 0 auto; } .atua .caix1 {display: block; width: 100%; float: left; position: relative; background: url(images/atuacao-mapa.png) top center no-repeat; background-size: 60%; height: 520px; padding-top: 10px; } } /* ===== MENU SOBRE O HERO (PATCH FINAL) ===== */ /* mata o posicionamento antigo do menu (left:25%, margin-top:-...) */ .hero .menu{ position: static !important; left: auto !important; margin-top: 0 !important; float: none !important; width: auto !important; height: auto !important; font-family: poppins, 'Open Sans', sans-serif; font-size: 13px; text-transform: uppercase; } /* DESKTOP */ .hero .menu-desktop{ display: flex; } .hero .menu-desktop ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; } .hero .menu-desktop li{ margin: 0 !important; float: none !important; } .hero .menu-desktop a{ display: inline-block; color: #fff; font-weight: 800; text-decoration: none; opacity: .92; transition: opacity .2s ease, transform .2s ease, color .2s ease; } .hero .menu-desktop a:hover{ opacity: 1; transform: translateY(-1px); color: #ff8a00; } /* HAMBURGER (mobile) */ #bt_menu{ display:none; } label[for="bt_menu"]{ display: none !important; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.25); color: #fff; font-size: 24px; line-height: 1; } /* menu mobile painel */ .hero .menu-mobile{ display: none; } /* MOBILE */ @media (max-width: 900px){ .hero .menu-desktop{ display:none; } label[for="bt_menu"]{ display: inline-flex !important; margin-left: 10px; } .hero .menu-mobile{ display: block; position: absolute; top: 84px; right: 14px; width: min(320px, 92vw); border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,12,18,.78); backdrop-filter: blur(10px); box-shadow: 0 24px 80px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; padding: 10px; z-index: 999999; } .hero .menu-mobile ul{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; } .hero .menu-mobile li{ margin: 0 !important; float: none !important; } .hero .menu-mobile a{ display:block; padding: 12px 12px; border-radius: 10px; color:#fff; text-decoration:none; font-weight: 800; } .hero .menu-mobile a:hover{ background: rgba(255,255,255,.06); } /* abre */ #bt_menu:checked ~ .menu-mobile{ opacity: 1; transform: translateY(0); pointer-events: auto; } } /* ========================================= PATCH FINAL — HEADER + MENU SOBRE O HERO (colar no FINAL do style.css) ========================================= */ .hero{ position: relative; } /* Topo por cima do slide */ .hero .topo{ position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; pointer-events: none !important; } /* deixa clicável somente o que precisa */ .hero .topo .barra, .hero .topo nav, .hero .topo label, .hero .topo .barrabotao{ pointer-events: auto !important; } /* Barra alinhada (logo + menu + botão) */ .hero .barra{ max-width: 1400px !important; margin: 0 auto !important; height: 100px !important; padding: 20px 40px !important; display: flex !important; align-items: center !important; gap: 26px !important; /* zera heranças do tema */ overflow: visible !important; float: none !important; position: relative !important; } /* Logo */ .hero .logo{ width: 260px !important; height:110px !important; background: url(images/logo.png) left center no-repeat !important; background-size: contain !important; /* zera heranças antigas */ left: auto !important; top: auto !important; position: static !important; flex: 0 0 auto !important; display: block !important; } /* ------------------------- MENU DESKTOP ------------------------- */ /* mata o menu antigo (left:25%, margin-top:-125px etc) dentro do hero */ .hero .menu{ position: static !important; left: auto !important; margin-top: 0 !important; float: none !important; width: auto !important; font-style: italic; font-family: poppins, 'Open Sans', sans-serif !important; font-size: 15px !important; text-transform: uppercase !important; } /* só aparece no desktop */ .hero .menu-desktop{ display: flex !important; } .hero .menu-desktop ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 75px !important; } .hero .menu-desktop li{ margin: 0 !important; float: none !important; } .hero .menu-desktop a{ display: inline-block !important; text-decoration: none !important; color: #fff !important; font-weight: 800 !important; opacity: .92 !important; transition: opacity .2s ease, transform .2s ease, color .2s ease !important; } .hero .menu-desktop a:hover{ opacity: 1 !important; transform: translateY(-1px) !important; color: #ff8a00 !important; } /* ------------------------------------ BOTÃO -------------------------------------*/ .hero .barrabotao{ margin-left: auto !important; display: flex !important; align-items: center !important; position: relative !important; z-index: 999999 !important; } /* BOTÃO */ .hero .barrabotao a{ --slant: 18px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 26px; font-family: "Poppins", "Montserrat", Arial, sans-serif; font-size: 14px; font-weight: 600; color: #000 !important; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #c0c0c0 0%, #e1e1e1 50%, #b0b0b0 100%); box-shadow: 0 6px 18px rgba(192, 192, 192, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4); transition: all 0.3s ease; border-radius: 32px 61px 32px 111px; -webkit-border-radius: 32px 61px 32px 111px; -moz-border-radius: 32px 61px 32px 111px; } /* brilho interno suave (igual render) */ .hero .barrabotao a::after{ content:""; position:absolute; inset:2px; pointer-events:none; clip-path: polygon( calc(var(--slant) - 2px) 0%, 100% 0%, calc(100% - (var(--slant) - 2px)) 100%, 0% 100% ); background: linear-gradient( 180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60% ); } /* hover discreto */ .hero .barrabotao a:hover{ filter: drop-shadow(0 0 1px rgba(255,210,160,.95)) drop-shadow(0 0 8px rgba(255,160,40,.65)) drop-shadow(0 0 16px rgba(255,140,0,.45)); transform: translateY(-1px); transition: .2s ease; } /* === FIX: não cortar o brilho do botão do topo === */ .hero, .topo, .barra, .caixinhaslide, .slide, .slide .photo{ overflow: visible !important; } /* garante que o botão fique acima de tudo */ .hero .topo{ z-index: 999999 !important; } .hero .barrabotao{ z-index: 9999999 !important; position: relative !important; } /* ------------------------- HAMBURGER + MENU MOBILE ------------------------- */ #bt_menu{ display: none !important; } label[for="bt_menu"]{ display: none !important; width: 44px !important; height: 44px !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(0,0,0,.25) !important; color: #fff !important; font-size: 24px !important; line-height: 1 !important; } .hero .menu-mobile{ display: none !important; } /* RESPONSIVO */ @media (max-width: 900px){ .hero .barra{ height: 84px !important; padding: 16px 18px !important; } .hero .logo{ width: 190px !important; height: 56px !important; } /* some o menu desktop */ .hero .menu-desktop{ display: none !important; } /* mostra hamburger */ label[for="bt_menu"]{ display: inline-flex !important; margin-left: 10px !important; } /* painel do menu mobile */ .hero .menu-mobile{ display: block !important; position: absolute !important; top: 84px !important; right: 20px !important; width: min(320px, 92vw) !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(10,12,18,.78) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 24px 80px rgba(0,0,0,.55) !important; opacity: 0 !important; transform: translateY(-8px) !important; pointer-events: none !important; transition: opacity .22s ease, transform .22s ease !important; padding: 10px !important; z-index: 999999 !important; } .hero .menu-mobile ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } .hero .menu-mobile li{ margin: 0 !important; float: none !important; } .hero .menu-mobile a{ display: block !important; padding: 12px 12px !important; border-radius: 10px !important; color: #fff !important; text-decoration: none !important; font-weight: 800 !important; } .hero .menu-mobile a:hover{ background: rgba(255,255,255,.06) !important; } /* abre o painel */ #bt_menu:checked ~ .menu-mobile{ opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* no mobile deixa o botão menor */ .hero .barrabotao a{ font-size: 12px !important; padding: 9px 14px !important; } } /* ============================== MENU RESPONSIVO CORRIGIDO ============================== */ @media (max-width: 900px) { html, body { overflow-x: hidden !important; } .hero .topo { width: 100% !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; } /* 🔥 AQUI CORRIGIDO */ .hero .barra { width: 100% !important; max-width: 100% !important; height: 82px !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; /* 👈 CORRIGIDO */ position: relative !important; box-sizing: border-box !important; overflow: visible !important; } .hero .logo { width: 170px !important; height: 58px !important; position: relative !important; margin: 0 !important; background-size: contain !important; background-position: left center !important; background-repeat: no-repeat !important; } .hero .menu-desktop, .hero .barrabotao { display: none !important; } #bt_menu { display: none !important; } /* 🔥 BOTÃO NA DIREITA */ label[for="bt_menu"] { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; right: 16px !important; /* 👈 CORRIGIDO */ top: 50% !important; transform: translateY(-50%) !important; /* 👈 CORRIGIDO */ margin: 0 !important; padding: 0 !important; cursor: pointer !important; z-index: 9999999 !important; color: #fff !important; font-size: 24px !important; line-height: 1 !important; background: rgba(10, 12, 18, 0.35) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0,0,0,.35) !important; backdrop-filter: blur(6px) !important; } label[for="bt_menu"] i, label[for="bt_menu"] span { color: #fff !important; font-size: 24px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } .hero .menu-mobile { position: absolute !important; top: 88px !important; left: 16px !important; right: 16px !important; width: auto !important; margin: 0 !important; padding: 10px !important; background: rgba(10, 12, 18, 0.96) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(0,0,0,.55) !important; backdrop-filter: blur(10px) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) !important; pointer-events: none !important; transition: all .25s ease !important; z-index: 9999998 !important; } .hero .menu-mobile ul { width: 100% !important; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .hero .menu-mobile li { width: 100% !important; margin: 0 !important; } .hero .menu-mobile a { display: block !important; width: 100% !important; padding: 14px 15px !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } #bt_menu:checked ~ .menu-mobile { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; } } /* CELULAR PEQUENO */ @media (max-width: 430px) { .hero .barra { height: 76px !important; padding: 10px 14px !important; } .hero .logo { width: 140px !important; height: 70px !important; top: 5px !important; } label[for="bt_menu"] { width: 44px !important; height: 44px !important; right: 14px !important; } .hero .menu-mobile { top: 82px !important; left: 12px !important; right: 12px !important; } } /* FORÇAR MENU PARA DIREITA */ @media (max-width: 900px) { label[for="bt_menu"] { left: auto !important; right: 16px !important; margin-left: auto !important; transform: translateY(-50%) !important; } } /* MENU PREMIUM: HAMBÚRGUER VIRA X */ label[for="bt_menu"] { position: relative !important; } label[for="bt_menu"] i { display: none !important; } label[for="bt_menu"]::before, label[for="bt_menu"]::after, label[for="bt_menu"] span { content: ""; position: absolute; width: 22px; height: 2px; background: #fff; border-radius: 20px; transition: all .3s ease; } label[for="bt_menu"]::before { top: 15px; } label[for="bt_menu"] span { top: 23px; } label[for="bt_menu"]::after { top: 31px; } /* quando abrir, vira X */ #bt_menu:checked + label::before { top: 23px; transform: rotate(45deg); background: #ff8a00; } #bt_menu:checked + label span { opacity: 0; transform: scaleX(0); } #bt_menu:checked + label::after { top: 23px; transform: rotate(-45deg); background: #ff8a00; } /* MENU PREMIUM - HAMBÚRGUER VIRA X */ @media (max-width: 900px) { label[for="bt_menu"] { right: 16px !important; left: auto !important; position: absolute !important; } label[for="bt_menu"]::before, label[for="bt_menu"]::after, label[for="bt_menu"] span { content: ""; position: absolute; width: 24px; height: 2px; background: #fff; border-radius: 20px; transition: all .3s ease; } label[for="bt_menu"]::before { top: 15px; } label[for="bt_menu"] span { top: 23px; } label[for="bt_menu"]::after { top: 31px; } #bt_menu:checked + label::before { top: 23px; transform: rotate(45deg); background: #ff8a00; } #bt_menu:checked + label span { opacity: 0; transform: scaleX(0); } #bt_menu:checked + label::after { top: 23px; transform: rotate(-45deg); background: #ff8a00; } }