/*
  Novo visual StiloLaser Tools
  - Fundo claro (#f6f6f6), cards brancos, detalhes dourados (#D6B16A) e preto (#232323)
  - Tipografia moderna
  - Menu fixo com sombra
  - Botões e links com efeito
  - Cards com hover
*/

/* Configurações básicas do corpo da página */
body {
  background: #f6f6f6; /* Cor de fundo clara */
  color: #232323; /* Cor do texto principal - quase preto */
  font-family: 'Segoe UI', Arial, sans-serif; /* Fonte principal moderna */
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove preenchimento padrão */
}

/* Cabeçalho do site - barra superior fixa */
.header-stilolaser {
  background: #fff; /* Fundo branco para o cabeçalho */
  border-bottom: 3px solid #D6B16A; /* Borda dourada na parte inferior */
  box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Sombra suave */
  position: sticky; /* Mantém o cabeçalho fixo ao rolar */
  top: 0; /* Alinha ao topo da janela */
  z-index: 1000; /* Garante que fique acima de outros elementos */
  padding: 0; /* Sem preenchimento interno */
}

/* Barra de navegação dentro do cabeçalho */
.navbar-stilo {
  display: flex; /* Layout flexível */
  align-items: center; /* Alinha os itens verticalmente */
  justify-content: space-between; /* Distribui espaço entre logo e menu */
  padding: 0 32px; /* Preenchimento horizontal */
  min-height: 72px; /* Altura mínima */
}

/* Logo dentro da barra de navegação */
.navbar-stilo img {
  height: 54px; /* Altura fixa para o logo */
}

/* Container do menu principal */
.menu-stilo {
  display: flex; /* Layout flexível horizontal */
  gap: 32px; /* Espaço entre os itens do menu */
}

/* Links no menu principal */
.menu-stilo a {
  color: #232323; /* Cor do texto - quase preto */
  text-decoration: none; /* Remove sublinhado */
  font-weight: 500; /* Peso da fonte - semibold */
  font-size: 1.07rem; /* Tamanho da fonte */
  padding: 6px 14px; /* Preenchimento interno */
  border-radius: 6px; /* Cantos arredondados */
  transition: background 0.2s, color 0.2s; /* Animação suave */
}

/* Estilo para links ativos ou ao passar o mouse */
.menu-stilo a.active, .menu-stilo a:hover {
  background: #D6B16A; /* Fundo dourado */
  color: #fff; /* Texto branco */
}

/* Títulos principais do site */
.stilo-title {
  color: #D6B16A; /* Cor dourada */
  font-size: 2.2rem; /* Tamanho grande */
  font-weight: bold; /* Negrito */
  margin-bottom: 0; /* Sem margem inferior */
}

/* Banner principal - seção hero */
.banner-stilo {
  background: linear-gradient(90deg, #fff 70%, #D6B16A22 100%); /* Gradiente suave */
  padding: 48px 0 24px 0; /* Preenchimento vertical */
  display: flex; /* Layout flexível */
  align-items: center; /* Alinha itens verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  gap: 48px; /* Espaço entre texto e imagem */
  flex-wrap: wrap; /* Permite quebra em telas menores */
  text-align: left; /* Alinhamento de texto */
}

/* Container de texto no banner */
.banner-stilo .banner-text {
  max-width: 500px; /* Largura máxima para o texto */
}

/* Título principal no banner */
.banner-stilo h1 {
  font-size: 2.5rem; /* Tamanho grande */
  font-weight: bold; /* Negrito */
  color: #232323; /* Cor quase preta */
}

/* Parágrafo no banner */
.banner-stilo p {
  font-size: 1.2rem; /* Tamanho aumentado */
}

/* Imagem do logo no banner */
.banner-stilo img {
  max-width: 190px; /* Largura máxima */
  border-radius: 50%; /* Forma circular */
  box-shadow: 0 4px 16px #D6B16A33; /* Sombra dourada suave */
}

/* Container dos blocos de categorias na home */
.categorias-blocos {
  display: flex; /* Layout flexível */
  flex-wrap: wrap; /* Permite quebra em múltiplas linhas */
  justify-content: space-around; /* Distribui espaço entre os cards */
  gap: 20px; /* Espaçamento entre cards */
  margin-bottom: 40px; /* Margem inferior */
}

/* Cards individuais de categoria */
.categoria-card {
  background: #fff; /* Fundo branco */
  border-radius: 12px; /* Cantos bem arredondados */
  box-shadow: 0 4px 12px #0000001a; /* Sombra suave */
  padding: 18px 16px 24px 16px; /* Preenchimento interno */
  flex: 1 1 220px; /* Base flexível, mas com mínimo */
  max-width: calc(25% - 15px); /* Máximo de 4 cards por linha */
  text-align: center; /* Texto centralizado */
  transition: transform 0.3s ease; /* Animação ao passar o mouse */
}

/* Efeito hover nos cards de categoria */
.categoria-card:hover {
  transform: translateY(-5px); /* Eleva o card levemente */
}

/* Imagens dentro dos cards de categoria */
.categoria-card img {
  width: 60px; /* Largura fixa */
  height: 60px; /* Altura fixa */
  object-fit: cover; /* Ajusta proporção da imagem */
  border-radius: 8px; /* Cantos arredondados */
  margin-bottom: 12px; /* Espaço abaixo da imagem */
  background: #f6f6f6; /* Fundo cinza claro */
}

/* Títulos dentro dos cards de categoria */
.categoria-card h4 {
  color: #D6B16A; /* Cor dourada */
  font-size: 1.1rem; /* Tamanho da fonte */
  margin-bottom: 8px; /* Espaço abaixo do título */
  font-weight: bold; /* Negrito */
}

/* Texto dentro dos cards de categoria */
.categoria-card p {
  font-size: 0.97rem; /* Tamanho da fonte levemente menor */
  color: #444; /* Cinza escuro para melhor leitura */
}

/* Estilo padrão de botões */
.btn-stilo {
  background: #D6B16A; /* Fundo dourado */
  color: #232323; /* Texto quase preto */
  border: none; /* Sem borda */
  border-radius: 6px; /* Cantos arredondados */
  padding: 10px 22px; /* Preenchimento generoso */
  font-size: 1.1rem; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  transition: background 0.2s, color 0.2s; /* Animação suave */
  box-shadow: 0 2px 8px #d6b16a22; /* Sombra dourada muito suave */
}

/* Efeito hover nos botões */
.btn-stilo:hover {
  background: #232323; /* Fundo quase preto */
  color: #fff; /* Texto branco */
}

/* Cards de produto */
.card {
  background: #fff; /* Fundo branco */
  border: 1px solid #eaeaea; /* Borda muito suave */
  border-radius: 12px; /* Cantos bem arredondados */
  box-shadow: 0 2px 12px #23232311; /* Sombra suave */
  color: #232323; /* Texto quase preto */
  transition: box-shadow 0.2s, transform 0.2s; /* Animação suave */
}

/* Efeito hover nos cards de produto */
.card:hover {
  box-shadow: 0 6px 24px #23232322; /* Sombra mais pronunciada */
  transform: translateY(-2px) scale(1.02); /* Eleva e aumenta levemente */
}

/* Títulos dos cards de produto */
.card-title {
  color: #D6B16A; /* Cor dourada */
  font-size: 1.2rem; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
}

/* Seção de serviços personalizados (legacy, usado menos) */
.section-personalizados {
  background: #fff; /* Fundo branco */
  border: 2px dashed #D6B16A; /* Borda tracejada dourada */
  padding: 32px 20px; /* Preenchimento interno */
  border-radius: 12px; /* Cantos arredondados */
  margin: 40px 0; /* Margens verticais */
  box-shadow: 0 2px 8px #d6b16a11; /* Sombra dourada muito suave */
}

/* Botão estilo WhatsApp */
.link-whatsapp {
  background: #25D366; /* Verde WhatsApp */
  color: #fff; /* Texto branco */
  padding: 10px 18px; /* Preenchimento interno */
  border-radius: 6px; /* Cantos arredondados */
  text-decoration: none; /* Remove sublinhado */
  font-weight: bold; /* Negrito */
  display: inline-block; /* Comportamento inline-block */
  transition: background 0.2s; /* Animação suave */
}

/* Efeito hover no botão WhatsApp */
.link-whatsapp:hover {
  background: #128C7E; /* Verde WhatsApp mais escuro */
}

/* Rodapé */
footer {
  background: #232323; /* Fundo quase preto */
  color: #D6B16A; /* Texto dourado */
  border-top: 2px solid #D6B16A; /* Borda superior dourada */
  padding: 16px 0; /* Preenchimento vertical */
  text-align: center; /* Texto centralizado */
  margin-top: 40px; /* Margem superior */
  width: 100%; /* Largura total */
  position: relative; /* Posicionamento relativo */
}

/* Garante que o conteúdo ocupe toda a altura da página */
html, body {
  height: 100%; /* Altura total */
}

/* Wrapper principal para layout flexível vertical */
#main-wrapper {
  min-height: 100vh; /* Altura mínima de 100% da viewport */
  display: flex; /* Layout flexível */
  flex-direction: column; /* Direção vertical */
}

/* Conteúdo principal cresce para ocupar espaço disponível */
#main-wrapper main {
  flex: 1; /* Cresce para preencher espaço */
}

/* Nova seção dedicada aos serviços personalizados */
.secao-personalizados {
    background-color: #f8f9fa; /* Cinza muito claro para destacar a seção */
    padding: 40px 0; /* Preenchimento vertical */
    border-top: 1px solid #eee; /* Borda superior sutil */
    border-bottom: 1px solid #eee; /* Borda inferior sutil */
}

/* Título da seção personalizada */
.secao-personalizados h2 {
    margin-bottom: 20px; /* Espaço abaixo do título */
}

/* Texto de destaque na seção personalizada */
.secao-personalizados .lead {
    font-size: 1.1rem; /* Tamanho da fonte */
    margin-bottom: 20px; /* Espaço abaixo do texto */
}

/* Imagens na seção personalizada */
.secao-personalizados img {
    border: 3px solid #fff; /* Borda branca */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Ajustes responsivos para telas médias (tablets) */
@media (max-width: 767.98px) {
    /* Inverte a ordem da imagem e texto na seção personalizada */
    .secao-personalizados .row {
        flex-direction: column-reverse; /* Imagem vem antes do texto */
    }
    /* Espaçamento da imagem */
    .secao-personalizados .col-md-5 {
        margin-bottom: 30px; /* Espaço entre imagem e texto */
    }
    /* Centraliza texto em telas pequenas */
    .secao-personalizados .text-md-start {
        text-align: center !important; 
    }
}

/* Ajustes responsivos para telas menores (tablets e celulares maiores) */
@media (max-width: 900px) {
  /* Banner centralizado em coluna */
  .banner-stilo {
    flex-direction: column; /* Disposição vertical */
    align-items: center; /* Centraliza horizontalmente */
    gap: 24px; /* Reduz espaço entre elementos */
    text-align: center; /* Centraliza texto */
  }
  
  /* Categorias em coluna única */
  .categorias-blocos {
    flex-direction: column; /* Disposição vertical */
    align-items: center; /* Centraliza horizontalmente */
    gap: 24px; /* Espaço entre os cards */
  }
  
  /* Ajustes na barra de navegação */
  .navbar-stilo {
    flex-direction: row; /* Mantém disposição horizontal */
    justify-content: space-between; /* Separa logo e botão de menu */
    padding: 0 10px; /* Reduz o padding horizontal */
    min-height: 56px; /* Reduz altura */
  }
  
  /* Reduz tamanho do logo */
  .navbar-stilo img {
    height: 40px; /* Altura menor */
  }
  
  /* Menu na versão mobile */
  .menu-stilo {
    display: none; /* Esconde por padrão */
    flex-direction: column; /* Disposição vertical */
    gap: 0; /* Remove espaço entre itens */
    background: #fff; /* Fundo branco */
    position: absolute; /* Posicionamento absoluto */
    top: 56px; /* Começa logo abaixo do cabeçalho */
    right: 0; /* Alinhado à direita */
    width: 180px; /* Largura fixa */
    border-radius: 0 0 12px 12px; /* Arredonda apenas cantos inferiores */
    box-shadow: 0 8px 24px #23232322; /* Sombra mais pronunciada */
    z-index: 2000; /* Acima de outros elementos */
    padding: 10px 0; /* Padding vertical */
  }
  
  /* Menu móvel quando visível */
  .menu-stilo.show {
    display: flex !important; /* Mostra quando a classe .show é aplicada */
  }
  
  /* Botão do menu hamburguer */
  .menu-toggle {
    display: block !important; /* Mostra o botão em telas pequenas */
    cursor: pointer; /* Cursor tipo mão */
    font-size: 24px; /* Tamanho do ícone */
    color: #D6B16A; /* Cor dourada */
    background: transparent; /* Sem fundo */
    border: none; /* Sem borda */
    padding: 5px 10px; /* Padding para área de toque */
    margin-right: 10px; /* Margem direita */
  }
}

/* Ajustes responsivos para dispositivos móveis menores */
@media (max-width: 600px) {
  /* Título do banner em telas pequenas */
  .banner-stilo h1 {
    font-size: 1.3rem; /* Tamanho reduzido */
  }
  
  /* Container de texto no banner */
  .banner-stilo .banner-text {
    max-width: 90vw; /* Largura de 90% da viewport */
  }
  
  /* Cards de categoria em telas pequenas */
  .categoria-card {
    width: 100%; /* Largura total */
    min-width: unset; /* Remove largura mínima */
    max-width: 85%; /* Largura máxima de 85% */
    margin: 0 auto 15px auto; /* Centraliza com margem inferior */
    padding: 15px; /* Padding reduzido e uniforme */
    flex: 0 0 auto; /* Não cresce nem encolhe */
  }
  
  /* Imagens nos cards de categoria em telas pequenas */
  .categoria-card img {
    width: 50px; /* Tamanho reduzido */
    height: 50px; /* Tamanho reduzido */
  }
  
  /* Títulos nos cards de categoria em telas pequenas */
  .categoria-card h4 {
    font-size: 1rem; /* Tamanho reduzido */
  }
  
  /* Texto nos cards de categoria em telas pequenas */
  .categoria-card p {
    font-size: 0.9rem; /* Tamanho reduzido */
  }
  
  /* Container de cards em telas pequenas */
  .categorias-blocos {
    display: flex; /* Layout flexível */
    flex-direction: column; /* Disposição vertical */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    width: 100%; /* Largura total */
  }
  
  /* Cards de exemplos de trabalho em telas pequenas */
  .card {
    margin-bottom: 15px; /* Espaço entre cards */
    max-width: 85%; /* Largura máxima reduzida */
    margin-left: auto; /* Centraliza horizontalmente */
    margin-right: auto; /* Centraliza horizontalmente */
    padding-top: 10px; /* Espaço superior dentro do card */
  }
  
  .card-img-top {
    height: auto; /* Altura automática baseada na proporção */
    max-height: 180px; /* Altura máxima */
    width: 100%; /* Largura total do container */
    object-fit: contain; /* Mantém a imagem inteira sem cortes */
    background-color: #f8f8f8; /* Fundo claro para imagens */
    border-radius: 8px; /* Cantos arredondados para a imagem */
    padding: 8px 8px 0 8px; /* Padding nas laterais e topo da imagem */
  }
  
  .card-body {
    padding: 12px; /* Padding reduzido */
  }
  
  .card-title {
    font-size: 1rem; /* Tamanho reduzido */
    margin-bottom: 8px; /* Espaço reduzido */
  }
  
  .card-text {
    font-size: 0.85rem; /* Tamanho reduzido */
    margin-bottom: 10px; /* Espaço reduzido */
  }
  
  /* Ajustes de botões em telas pequenas */
  .btn-stilo,
  .text-center .btn-stilo,
  .btn.btn-stilo {
    display: inline-block; /* Comportamento inline-block */
    margin: 0.5rem auto; /* Margens automáticas */
    width: auto; /* Largura automática */
    min-width: 120px; /* Largura mínima */
    max-width: 200px; /* Largura máxima */
    padding: 8px 16px; /* Padding reduzido */
    font-size: 0.9rem; /* Tamanho de fonte reduzido */
    text-align: center; /* Texto centralizado */
  }
  
  /* Botão WhatsApp em telas pequenas */
  a.link-whatsapp {
    display: inline-block; /* Comportamento inline-block */
    padding: 8px 16px; /* Padding reduzido */
    font-size: 0.9rem; /* Tamanho de fonte reduzido */
  }
  
  /* Botões em formulários em telas pequenas */
  form .btn-stilo {
    width: 100%; /* Largura total */
    max-width: 200px; /* Largura máxima */
  }
}

/* Estado padrão do botão do menu hamburguer */
.menu-toggle {
  display: none; /* Escondido em desktop */
}