body { margin: 0; font-family: 'Montserrat', sans-serif; color: #444; background: #fff; } header { background: #F28C28; color: #fff; padding: 15px 0; position: sticky; top: 0; z-index: 1000; } header .container { width: 90%; margin: auto; display: flex; align-items: center; justify-content: space-between; } .logo { height: 55px; } .btn-whatsapp { background: #25D366; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.3s; } .btn-whatsapp:hover { background: #1EBE5B; } .hero { background: url('../images/fundo-hero.jpg') center/cover no-repeat; height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } .hero .overlay { background: rgba(0,0,0,0.55); color: #fff; padding: 60px 20px; width: 100%; } .hero h1 { font-size: 2.5rem; margin-bottom: 10px; } .hero p { font-size: 1.2rem; margin-bottom: 25px; } .btn-hero { background: #F28C28; color: #fff; padding: 14px 25px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: background .3s; } .btn-hero:hover { background: #d87410; } .servicos { text-align: center; padding: 70px 20px; background: #f9f9f9; } .servicos h2 { color: #F28C28; margin-bottom: 35px; } .grid-servicos { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 20px; max-width: 1000px; margin: auto; } .grid-servicos div { background: #fff; padding: 18px; border-left: 4px solid #F28C28; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); font-weight: 600; } .galeria { text-align: center; padding: 70px 20px; } .galeria h2 { color: #F28C28; margin-bottom: 40px; } .grid-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; max-width: 1100px; margin: auto; } .item-galeria { overflow: hidden; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .item-galeria img { width: 100%; height: auto; transition: transform 0.3s; } .item-galeria img:hover { transform: scale(1.07); } .atendimento { background: #F28C28; color: #fff; text-align: center; padding: 60px 20px; } .atendimento h2 { margin-bottom: 15px; } .atendimento p { font-size: 1.1rem; } .contato { background: #f5f5f5; text-align: center; padding: 70px 20px; } .contato h2 { color: #F28C28; margin-bottom: 20px; } .contato p { margin-bottom: 15px; font-size: 1.1rem; } footer { background: #333; color: #ccc; text-align: center; padding: 25px 10px; font-size: 0.9rem; } /* ========================== ESTILO GERAL ========================== */ body { margin: 0; font-family: 'Montserrat', sans-serif; color: #444; background: #fff; } h1, h2, h3, p { margin: 0; padding: 0; } /* ========================== CABEÇALHO FIXO ========================== */ header { background: #F28C28; color: #fff; padding: 12px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } header .container { width: 90%; margin: auto; display: flex; align-items: center; justify-content: space-between; } .logo { height: 50px; } .btn-whatsapp { background: #25D366; color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: background 0.3s; } .btn-whatsapp:hover { background: #1ebe5b; } /* ========================== SEÇÃO HERO (TOPO) ========================== */ .hero { background: url('../images/fundo-hero.jpg') center/cover no-repeat; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } .hero .overlay { background: rgba(0, 0, 0, 0.6); color: #fff; padding: 40px 20px; border-radius: 8px; animation: fadeIn 1s ease; } .hero h1 { font-size: 2rem; margin-bottom: 10px; } .hero p { font-size: 1.1rem; margin-bottom: 18px; } .btn-hero { background: #F28C28; color: #fff; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: background .3s; } .btn-hero:hover { background: #d87410; } /* ========================== SERVIÇOS ========================== */ .servicos { text-align: center; padding: 50px 20px; background: #fafafa; } .servicos h2 { color: #F28C28; margin-bottom: 25px; font-size: 1.8rem; } .grid-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; max-width: 1000px; margin: auto; } .grid-servicos div { background: #fff; padding: 15px; border-left: 4px solid #F28C28; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 600; } /* ========================== GALERIA ========================== */ .galeria { text-align: center; padding: 50px 20px; } .galeria h2 { color: #F28C28; margin-bottom: 25px; font-size: 1.8rem; } .grid-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1100px; margin: auto; } .item-galeria { overflow: hidden; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.15); } .item-galeria img { width: 100%; height: auto; transition: transform 0.3s; } .item-galeria img:hover { transform: scale(1.05); } /* ========================== ÁREA DE ATENDIMENTO ========================== */ .atendimento { background: #F28C28; color: #fff; text-align: center; padding: 45px 20px; } .atendimento h2 { margin-bottom: 10px; font-size: 1.8rem; } .atendimento p { font-size: 1.05rem; } /* ========================== CONTATO ========================== */ .contato { background: #f5f5f5; text-align: center; padding: 60px 20px; } .contato h2 { color: #F28C28; margin-bottom: 15px; font-size: 1.8rem; } .contato p { margin-bottom: 12px; font-size: 1rem; } /* ========================== RODAPÉ ========================== */ footer { background: #333; color: #ccc; text-align: center; padding: 18px 10px; font-size: 0.9rem; } /* ========================== ANIMAÇÕES ========================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* RESPONSIVIDADE */ @media (max-width: 768px) { .hero { height: 55vh; } .hero h1 { font-size: 1.6rem; } .btn-hero { font-size: 0.9rem; } } /* ========================== SEÇÃO HERO (TOPO) ========================== */ .hero { background: url('../images/fundo-hero.jpg') center/cover no-repeat; height: 60vh; /* altura padrão para telas médias */ display: flex; align-items: center; justify-content: center; text-align: center; position: relative; min-height: 380px; } .hero .overlay { background: rgba(0, 0, 0, 0.6); color: #fff; padding: 40px 25px; border-radius: 8px; animation: fadeIn 1s ease; max-width: 800px; } .hero h1 { font-size: 2.2rem; margin-bottom: 10px; } .hero p { font-size: 1.2rem; margin-bottom: 18px; } .btn-hero { background: #F28C28; color: #fff; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: background .3s; } .btn-hero:hover { background: #d87410; } /* ===== Ajustes de responsividade ===== */ /* 🖥️ Telas grandes (monitores wide > 1400px): banner menor */ @media (min-width: 1400px) { .hero { height: 45vh; /* reduz altura */ min-height: 350px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1.05rem; } } /* 💻 Laptops padrão */ @media (min-width: 992px) and (max-width: 1399px) { .hero { height: 50vh; } } /* 📱 Tablets e celulares */ @media (max-width: 768px) { .hero { height: auto; padding: 60px 0; } .hero .overlay { border-radius: 0; padding: 30px 15px; } .hero h1 { font-size: 1.6rem; } .hero p { font-size: 1rem; } } /* ========================== CENTRALIZAÇÃO GLOBAL ========================== */ /* Limita largura máxima e centraliza todos os blocos */ section, footer, header .container { max-width: 1200px; margin: 0 auto; } /* Centraliza textos e blocos das seções principais */ .sobre, .servicos, .galeria, .atendimento, .contato { text-align: center; } /* Ajusta parágrafos dentro da seção “Sobre” para ficarem centralizados e legíveis */ .sobre p { text-align: justify; text-align-last: center; margin-left: auto; margin-right: auto; max-width: 950px; } /* Corrige espaçamento entre seções */ section { padding-top: 40px; padding-bottom: 40px; } /* Faz a galeria e serviços ficarem bem centralizados */ .grid-servicos, .grid-galeria { margin-left: auto; margin-right: auto; } /* Melhora o botão WhatsApp nas seções */ .btn-whatsapp { display: inline-block; margin-top: 15px; } /* SEÇÃO SOBRE */ .sobre { background: #fff; padding: 80px 20px 60px; text-align: center; } .sobre .container { max-width: 1100px; margin: auto; } .sobre-bloco { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; } .sobre-texto { flex: 1 1 450px; text-align: justify; } .sobre-imagem img { max-width: 420px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } /* SERVIÇOS DETALHADOS */ .servicos-detalhados { background: #fafafa; padding: 80px 20px; text-align: center; } .servicos-detalhados h2 { color: #F28C28; margin-bottom: 40px; font-size: 1.9rem; } .grid-servicos-detalhados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; max-width: 1100px; margin: auto; } .grid-servicos-detalhados .item { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s; } .grid-servicos-detalhados .item:hover { transform: translateY(-5px); } .grid-servicos-detalhados img { width: 100%; border-radius: 6px; margin-bottom: 15px; } /* SEGMENTOS */ .segmentos { background: #fff; padding: 70px 20px; text-align: center; } .segmentos h2 { color: #F28C28; margin-bottom: 30px; } .grid-segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; max-width: 800px; margin: auto; font-weight: 600; font-size: 1.05rem; } .grid-segmentos div { background: #fafafa; border-left: 4px solid #F28C28; border-radius: 5px; padding: 15px; } /* === Miniaturas (thumbnails) MENORES === */ .grid-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* antes 300px */ gap: 12px; max-width: 1000px; /* mantém a grade mais compacta */ margin: auto; } .item-galeria { overflow: hidden; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.12); } .item-galeria img { display: block; width: 100%; height: 140px; /* miniatura pequena */ object-fit: cover; /* corta sem distorcer */ cursor: pointer; transition: transform .25s, box-shadow .25s; } .item-galeria img:hover { transform: scale(1.04); box-shadow: 0 6px 14px rgba(0,0,0,.2); } /* === Modal de imagem (GRANDE) === */ .modal { display: none; position: fixed; z-index: 2000; inset: 0; background: rgba(0,0,0,.85); justify-content: center; align-items: center; padding: 20px; } .modal-conteudo { width: 90vw; /* ocupa 90% da largura da viewport */ max-width: 1400px; /* limite em telas gigantes */ max-height: 90vh; /* ocupa até 90% da altura da viewport */ height: auto; object-fit: contain; /* mostra a imagem inteira sem cortar */ border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.55); animation: zoomIn .25s ease; } @keyframes zoomIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .fechar { position: absolute; top: 14px; right: 22px; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; font-weight: 700; transition: color .2s; } .fechar:hover { color: #F28C28; } /* thumbnails ainda menores em mobile (opcional) */ @media (max-width: 480px) { .item-galeria img { height: 120px; } }