/* style.css */


/* Configurações Globais e Variáveis de Cor */
:root {
--color-black: #0D0D0D; /* Preto profundo – fundo principal */
--color-white: #FFFFFF; /* Branco puro – textos principais */
--color-grey-light: #BFBFBF; /* Cinza suave – texto secundário */
--color-grey-dark: #1A1A1A; /* Cinza escuro – seções alternadas */
--color-blue: #4A90E2; /* Azul aço – botões e links */
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


body {
font-family: 'Montserrat', sans-serif;
color: var(--color-white);
background-color: var(--color-black);
}


.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px; /* Padding padrão para desktop */
}


/* Ajustes para Títulos de Seção Responsivos */
.section-title {
text-align: center;
margin-bottom: 10px;
font-size: 2.5rem; /* Tamanho base para desktop */
color: var(--color-white);
padding: 0 15px; /* Adiciona padding lateral para evitar que o texto encoste nas bordas */
word-break: break-word; /* Permite quebrar palavras longas, se necessário */
}


.section-title span {
color: var(--color-blue); /* Garante que o destaque esteja na cor azul */
}


.section-subtitle {
text-align: center;
margin-bottom: 40px;
font-size: 1.1rem; /* Tamanho base para desktop */
color: var(--color-grey-light);
padding: 0 15px; /* Adiciona padding lateral */
}


/* Estilos da Seção Principal (Header) */
.hero {
background-image:
linear-gradient(rgba(13,13,13,0.8), rgba(13,13,13,0.8)),
url('background.jpg');
background-size: cover;
background-position: center;
color: var(--color-white);
text-align: center;
padding: 100px 20px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90vh; /* Mantém a altura para um bom impacto visual */
}


.hero-content h1 {
font-size: 4rem;
font-weight: 700;
color: var(--color-blue);
}


.hero-content h2 {
font-size: 2rem;
margin-top: 10px;
color: var(--color-white);
}


.hero-content p {
font-size: 1.2rem;
max-width: 700px;
margin: 20px auto;
color: var(--color-grey-light);
}


.hero-buttons {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha em telas menores */
gap: 15px; /* Aumenta o espaçamento entre botões para melhor toque */
}


.btn {
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 700;
transition: all 0.3s ease;
display: inline-block; /* Garante que o padding funcione bem */
}


.btn-primary {
background-color: var(--color-blue);
color: var(--color-white);
}


.btn-primary:hover {
background-color: #417AC8;
}


.btn-secondary {
background-color: transparent;
color: var(--color-white);
border: 2px solid var(--color-white);
}


.btn-secondary:hover {
background-color: var(--color-white);
color: var(--color-black);
}


.hero-stats {
display: flex;
justify-content: space-around;
padding: 20px 15px; /* Adiciona padding lateral para mobile */
background-color: rgba(13,13,13,0.3);
flex-wrap: wrap; /* Permite que as estatísticas quebrem a linha */
}


.stat {
flex: 1; /* Permite que cada stat ocupe espaço proporcional */
min-width: 150px; /* Garante um tamanho mínimo para cada stat */
text-align: center;
margin: 10px; /* Espaçamento entre as stats */
}


.stat h3 {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-white);
}


.stat p {
font-size: 1rem;
color: var(--color-grey-light);
}


/* Estilos das Grades e Cards */
/* Grid padrão (para .grid-4 e outros que não são .grid-2 de projetos) */
.grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
}


.card {
background-color: var(--color-grey-dark);
border: 1px solid var(--color-grey-light);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
height: auto; /* Garante que o card se adapte ao conteúdo */
}


.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}


.card-image {
position: relative;
/* Altura será definida por .project-card .card-image ou em mobile */
background-color: var(--color-grey-light); /* Fundo caso a imagem não carregue */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}


.card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* ESSENCIAL para que a imagem preencha sem esticar */
display: block;
}


/* Tag de serviço em destaque (usada na seção de serviços) */
.card-image .tag-servico {
position: absolute;
top: 10px;
left: 10px;
background-color: var(--color-blue);
color: var(--color-white);
padding: 5px 10px;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 700;
z-index: 10; /* Garante que a tag fique acima da imagem */
}




.card-content {
padding: 20px; /* Padding interno do conteúdo do card */
display: flex;
flex-direction: column;
flex-grow: 1; /* Faz o conteúdo preencher o espaço restante */
}


.card-content h3 {
font-size: 1.2rem;
color: var(--color-white);
margin-bottom: 5px;
}


.card-content h4 {
font-size: 1rem;
color: var(--color-blue);
margin-bottom: 15px;
}


.card-content p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-grey-light);
}


/* Seção de Pisos (Serviços de Assentamento) */
#servicos-pisos { /* Alterado de #pisos para ser mais específico */
width: 100%;
padding: 60px 0;
background-color: var(--color-grey-dark); /* Adicionado para consistência de fundo alternado */
}


#servicos-pisos .grid-4 { /* Alterado para ser mais específico */
grid-template-columns: repeat(4, minmax(0, 1fr)); /* Mantém 4 colunas em desktop */
gap: 30px;
}


#servicos-pisos .grid-4 .card .card-image {
position: relative;
height: 200px; /* Ajuste este valor conforme a proporção desejada */
background-color: var(--color-grey-light);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}


#servicos-pisos .grid-4 .card .card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
display: block;
}


.features {
list-style: none;
margin: 15px 0;
}


.features li {
padding-left: 20px;
position: relative;
margin-bottom: 8px;
color: var(--color-grey-light);
}


.features li::before {
content: '•';
position: absolute;
left: 0;
color: var(--color-blue);
font-weight: 700;
}


.btn-orcamento {
display: block;
width: 100%;
background-color: var(--color-blue);
color: var(--color-white);
text-align: center;
padding: 12px;
border-radius: 5px;
text-decoration: none;
font-weight: 700;
transition: background-color 0.3s ease;
margin-top: auto; /* Empurra o botão para a parte inferior do card */
}


.btn-orcamento:hover {
background-color: #417AC8;
}


/* Depoimentos */
#depoimentos {
padding: 60px 20px; /* Adiciona padding lateral para mobile */
}


.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}


.testimonial-card {
background-color: var(--color-grey-dark);
padding: 30px;
border: 1px solid var(--color-grey-light);
border-radius: 8px;
display: flex;
flex-direction: column;
}


.testimonial-card .stars {
color: #f1c40f; /* Amarelo para estrelas */
font-size: 1.2rem;
margin-bottom: 15px;
}


.testimonial-card .quote {
font-style: italic;
line-height: 1.6;
flex-grow: 1;
margin-bottom: 20px;
color: var(--color-grey-light);
}


.testimonial-card .author strong {
display: block;
color: var(--color-white);
font-size: 1.1rem;
}


.testimonial-card .author span {
color: var(--color-grey-light);
font-size: 0.9rem;
}


/* Seção de Contato (Footer) */
footer {
width: 100%;
padding: 60px 0;
background-color: var(--color-grey-dark); /* Ajuste de cor de fundo */
}


footer .section-title,
footer .section-subtitle {
color: var(--color-white); /* Garante que o texto do título e subtítulo sejam brancos no footer */
}


.contact-grid {
display: grid;
grid-template-columns: 2fr 1fr; /* Proporção para desktop */
gap: 40px;
background-color: var(--color-grey-dark); /* Mantém o fundo escuro interno */
padding: 30px;
border-radius: 8px;
border: 1px solid var(--color-grey-light);
align-items: start;
}


.contact-form h3 {
margin-bottom: 20px;
color: var(--color-white);
}


.contact-form .form-group {
display: flex;
gap: 20px; /* Espaçamento entre campos de nome/telefone */
}


.contact-form input,
.contact-form textarea {
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: 1px solid var(--color-grey-light);
border-radius: 5px;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
background-color: var(--color-black);
color: var(--color-white);
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--color-grey-light); /* Cor do placeholder */
opacity: 0.8;
}


.contact-form button {
width: 100%;
border: none;
cursor: pointer;
background-color: var(--color-blue);
color: var(--color-white);
padding: 15px 30px; /* Padding para o botão de enviar */
border-radius: 5px;
font-weight: 700;
transition: background-color 0.3s ease;
}


.contact-form button:hover {
background-color: #417AC8;
}


/* Ajustes para WhatsApp dentro da área de contato */
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
color: var(--color-grey-light); /* Cor padrão para textos de info */
}


.contact-info h4 {
color: var(--color-white); /* Títulos de info brancos */
margin-bottom: 10px;
}


.contact-info p {
margin-bottom: 5px; /* Espaçamento entre parágrafos de info */
}


.contact-info span {
font-size: 0.9rem;
display: block; /* Para quebra de linha após o texto */
margin-bottom: 10px; /* Espaçamento abaixo do span */
}


.whatsapp-box {
text-align: center;
padding-top: 20px; /* Espaçamento para separar do bloco de info anterior */
border-top: 1px solid rgba(255,255,255,0.1); /* Linha divisória sutil */
margin-top: 10px;
}


.whatsapp-box .btn-secondary {
display: inline-block;
width: 100%;
max-width: 250px; /* Aumenta um pouco a largura máxima do botão WhatsApp */
margin: 0 auto;
padding: 12px 20px;
font-size: 1rem;
}




/* ==============================
ESTILOS DA GALERIA DE PROJETOS (COMPLETA E PROFISSIONAL)
============================== */
.card-gallery {
padding: 0;
height: auto;
background-color: var(--color-grey-dark);
border-radius: 8px 8px 0 0;
overflow: hidden;
display: flex; /* Usar flexbox para alinhar main-image e thumbs */
flex-direction: column; /* Organiza em coluna */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra sutil para destaque */
}


.card-gallery .main-image {
width: 100%;
height: 300px; /* Altura fixa para a imagem principal em desktop */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-black); /* Fundo sólido para preencher caso a imagem seja menor */
}

.card-gallery .main-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease; /* Transição para zoom sutil */
}

.card-gallery .main-image img:hover {
transform: scale(1.03); /* Leve zoom no hover */
}


.card-gallery .thumbs {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite que as miniaturas quebrem a linha */
gap: 10px;
padding: 10px;
background-color: var(--color-grey-dark);
border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
}

.card-gallery .thumbs img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease, border 0.3s ease, transform 0.2s ease;
border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para miniaturas */
}

.card-gallery .thumbs img:hover {
opacity: 1;
border: 2px solid var(--color-grey-light); /* Borda cinza claro no hover */
transform: translateY(-2px); /* Leve elevação no hover */
}

.card-gallery .thumbs img.active {
opacity: 1;
border: 2px solid var(--color-blue); /* Borda azul para a miniatura ativa */
transform: scale(1.05); /* Leve zoom para a ativa */
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5); /* Anel de foco azul */
}


/* ==============================
ESTILOS PARA O ACCORDION
============================== */
.accordion-summary {
position: relative;
padding-right: 40px; /* Espaço para o botão "Detalhes do Projeto" */
line-height: 1.5;
color: var(--color-grey-light);
font-size: 0.95rem; /* Ajusta o tamanho da fonte no resumo */
margin-bottom: 10px; /* Espaço entre o resumo e o botão */
}


.accordion-toggle {
display: block; /* Faz o botão ocupar toda a largura disponível */
margin-top: 10px; /* Espaço acima do botão */
padding: 10px 20px; /* Espaçamento interno do botão */
background-color: var(--color-blue); /* Cor de fundo */
color: var(--color-white); /* Cor do texto */
border: none; /* Remove bordas padrão */
border-radius: 5px; /* Arredonda os cantos */
cursor: pointer; /* Cursor para indicar que é clicável */
text-align: center; /* Centraliza o texto */
transition: background-color 0.3s; /* Efeito de transição */
}


.accordion-toggle:hover {
background-color: #417AC8; /* Cor ao passar o mouse */
}


.accordion-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Transição suave */
padding: 0; /* Começa sem padding, será adicionado quando abrir */
color: var(--color-grey-light);
font-size: 0.9rem; /* Ajusta o tamanho da fonte do detalhe */
line-height: 1.6;
}


.accordion-details.open {
max-height: 500px; /* Valor alto para garantir que todo o conteúdo apareça */
padding: 15px 0; /* Adiciona padding vertical quando aberto */
}


.accordion-details ul {
list-style: disc; /* Usa bullet points */
margin-left: 20px;
margin-top: 10px;
padding-right: 10px; /* Pequeno padding para evitar que o texto encoste na borda direita */
}


.accordion-details li {
margin-bottom: 5px;
}


/* Novo CTA para após os projetos */
.call-to-action-section {
text-align: center;
margin-top: 60px; /* Espaçamento da seção de projetos */
padding: 40px 20px;
background-color: var(--color-grey-dark);
border-radius: 8px;
border: 1px solid var(--color-grey-light);
}


.call-to-action-section .cta-text {
font-size: 1.5rem;
color: var(--color-white);
margin-bottom: 25px;
font-weight: 600;
}




/* --------------------------------------------------
SEÇÃO DE PROJETOS ESPECÍFICA (GRID 2)
-------------------------------------------------- */
#projetos {
padding: 40px 20px; /* Mantém o padding vertical, mas sem alterar display */
}


#projetos .section-title {
margin-bottom: 5px; /* Ajuste para alinhar melhor com o novo subtítulo */
}


#projetos .section-subtitle {
font-size: 1.2rem; /* Aumenta um pouco o destaque do subtítulo da seção */
margin-bottom: 50px; /* Mais espaço entre subtítulo e cards */
}


#projetos .grid-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* FORÇA DUAS COLUNAS em desktop */
gap: 30px !important;
width: 100% !important;
}


.project-card .card-image {
/* Este estilo será sobrescrito por .card-gallery .main-image para o projeto com galeria */
height: 300px; /* Altura padrão para imagens de projeto em desktop */
border-radius: 8px 8px 0 0; /* Arredonda cantos superiores */
}


/* Removido o span de tag de serviço específico para .project-card .card-image span,
pois o foco é na imagem principal. A tag-servico genérica ainda funciona para outros cards. */




/* ==============================
AJUSTES RESPONSIVOS GLOBAIS
============================== */


/* Geral para telas de tablet e menores */
@media (max-width: 992px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr); /* 2 colunas para grid-4 em tablets */
gap: 25px; /* Ajusta o gap */
}
.grid-3 {
grid-template-columns: repeat(2, 1fr); /* 2 colunas para grid-3 em tablets */
gap: 25px; /* Ajusta o gap */
}
/* O contact-grid será ajustado em 768px */
}


/* Ajustes específicos para Mobile (smartphones) */
@media (max-width: 768px) {
.container {
padding: 30px 15px; /* Reduz o padding lateral do container em mobile */
}


/* Hero */
.hero {
padding: 80px 15px 0; /* Ajusta padding do hero para mobile */
height: auto; /* Deixa a altura ser definida pelo conteúdo */
min-height: 85vh; /* Garante um mínimo para o hero */
}
.hero-content h1 {
font-size: 2.5rem; /* Reduz o tamanho do título principal */
}
.hero-content h2 {
font-size: 1.5rem; /* Reduz o subtítulo principal */
}
.hero-content p {
font-size: 1rem; /* Reduz o parágrafo do hero */
margin: 15px auto; /* Ajusta margem */
}
.hero-buttons {
flex-direction: column; /* Botões um abaixo do outro */
gap: 15px; /* Espaçamento entre eles */
margin-top: 25px;
}
.hero-buttons .btn {
width: 100%; /* Botões ocupam largura total */
max-width: 300px; /* Limita a largura máxima para não ficar muito largo */
padding: 14px 24px;
font-size: 1rem;
}
.hero-stats {
flex-direction: column; /* Estatísticas uma abaixo da outra */
align-items: center; /* Centraliza as estatísticas */
padding: 20px 15px;
gap: 20px; /* Espaçamento entre as estatísticas */
}
.stat {
flex-basis: 100%; /* Ocupa 100% da largura em mobile */
margin: 0; /* Remove margem lateral desnecessária */
}
.stat h3 {
font-size: 2rem; /* Reduz o tamanho dos números */
}
.stat p {
font-size: 0.9rem; /* Reduz o texto das estatísticas */
}


/* Títulos de Seção */
.section-title {
font-size: 2rem; /* Reduz o tamanho da fonte em telas menores */
}
.section-subtitle {
font-size: 0.95rem; /* Reduz o tamanho da fonte em telas menores */
margin-bottom: 30px; /* Ajusta a margem inferior */
}


/* Projetos */
#projetos .grid-2 {
grid-template-columns: 1fr !important; /* Uma coluna em mobile */
gap: 20px !important;
}
.project-card .card-image {
height: auto; /* Altura automática em mobile para melhor responsividade */
}

/* Ajustes específicos para a galeria em mobile */
.card-gallery .main-image {
height: 250px; /* Altura um pouco menor para a imagem principal em mobile */
}

.card-gallery .thumbs {
flex-wrap: wrap; /* Permite que as miniaturas quebrem a linha */
justify-content: center; /* Centraliza as miniaturas */
gap: 8px; /* Reduz o espaçamento entre miniaturas */
padding: 8px;
}

.card-gallery .thumbs img {
width: 60px; /* Reduz o tamanho das miniaturas em mobile */
height: 60px;
}


/* Serviços */
#servicos-pisos .grid-4 {
grid-template-columns: 1fr; /* Uma coluna em mobile */
gap: 20px;
}
#servicos-pisos .grid-4 .card .card-image {
height: auto; /* Altura automática em mobile */
}


/* Depoimentos */
#depoimentos .grid-3 {
grid-template-columns: 1fr; /* Uma coluna em mobile */
gap: 20px;
}


/* Contato */
.contact-grid {
grid-template-columns: 1fr; /* Uma coluna em mobile */
gap: 30px;
}
.contact-form .form-group {
flex-direction: column; /* Campos nome/telefone um abaixo do outro em mobile */
gap: 10px;
}
}