/* =============================
   CONFIGURAÇÕES GERAIS DO SITE
   ============================= */
body {
  font-family: Arial, sans-serif;     /* Fonte base */
  margin: 0;                           /* Remove margem padrão */
  background-color: #fff;             /* Fundo branco geral */
}

/* =============================
   CABEÇALHO REFRIMAQ (Atualizado)
   ============================= */

/* Área branca com logo e bloco vermelho à direita */
.topo-superior {
  background-color: #fff;
  font-family: Arial, sans-serif;
  border-bottom: 2px solid #ccc;
}

/* Container flexível do topo */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* Logo à esquerda */
.logo {
  max-height: 55px;
}

/* Bloco de telefone com fundo vermelho arredondado */
.agendamento {
  background-color: #a00;
  color: #fff;
  padding: 6px 15px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.agendamento strong {
  font-size: 16px;
}

/* =============================
   MENU DE NAVEGAÇÃO COM DIVISOR
   ============================= */
.menu-navegacao {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 14px 0;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* Links com divisores */
.menu-navegacao a {
  color: #a00;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  padding: 4px 0;
}

/* Hover em tom mais escuro */
.menu-navegacao a:hover {
  color: #700;
}

/* Criando divisor vertical entre links */
.menu-navegacao a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 2px;
  height: 20px;
  width: 1px;
  background-color: #ccc;
}


/* =============================
   MENU DE NAVEGAÇÃO
   ============================= */
nav {
  background-color: #c00;             /* Fundo vermelho escuro */
  color: white;                       /* Cor dos textos */
  padding: 10px 0;                    /* Espaçamento interno */
  text-align: center;                 /* Centraliza os links */
}

nav a {
  color: white;                       /* Cor dos links */
  text-decoration: none;             /* Remove sublinhado */
  margin: 0 20px;                     /* Espaço lateral entre os links */
  font-weight: bold;                 /* Negrito nos links */
}


/* =============================
   SEÇÃO HERO (IMAGEM GRANDE EM TELA CHEIA)
   ============================= */
.hero {
  width: 100vw;                     /* Ocupa 100% da largura da viewport */
  margin: 0;
  padding: 0;
  overflow: hidden;                 /* Evita rolagem horizontal indesejada */
}

.hero img {
  width: 100%;                      /* Imagem ocupa 100% da largura da section */
  height: auto;                     /* Mantém proporção */
  display: block;                   /* Remove espaçamento embaixo da imagem */
}


/* =============================
   SEÇÕES GERAIS
   ============================= */
.section {
  padding: 40px 20px;                 /* Espaçamento interno */
  text-align: center;                 /* Centraliza textos */
}

/* =============================
   SEÇÃO COM BANNER PRONTO (imagem + texto)
   ============================= */
.banner-conserto {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.banner-conserto .banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Texto por cima da imagem */
.texto-banner {
  position: absolute;
  right: 12%;          /* Estava 8% — mais à esquerda */
  top: 80px;          /* Estava 100px — agora mais acima */
  bottom: auto;       /* Remove restrição de base */
  transform: none;    /* Remove centralização vertical */
  color: white;
  max-width: 500px;
  padding: 20px;
  background: transparent;
}


.texto-banner h2 {
  font-size: 36px;           /* Título maior */
  font-weight: 800;          /* BEM negrito */
  margin-bottom: 25px;
}

.texto-banner ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 30px;
  font-size: 20px;           /* Texto da lista maior */
  line-height: 1.6;
}

.texto-banner li {
  margin-bottom: 12px;
}

/* Botão mais destacado */
.botao-branco {
  font-size: 20px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 30px;
  background-color: #fff;
  color: #a00;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}

.botao-branco:hover {
  background-color: #f4f4f4;
  color: #700;
}




/* =============================
   TÍTULO VERMELHO CENTRALIZADO
   ============================= */
.titulo-vermelho {
  font-size: 32px;
  font-weight: 800;
  color: #a00;
  margin-bottom: 40px;
  text-align: center;
}

/* =============================
   MARCAS ATENDIDAS (LOGOS)
   ============================= */
.marcas {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas fixas */
  gap: 40px 60px; /* espaçamento entre linhas e colunas */
  justify-items: center;
  align-items: center;
  padding: 20px 10px;
}

.marcas img {
  width: 180px; /* tamanho maior */
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.marcas img:hover {
  transform: scale(1.05);
}

/* Tablet: 2 colunas */
@media (max-width: 768px) {
  .marcas {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .marcas img {
    width: 160px;
  }
}

/* Celular: 1 coluna */
@media (max-width: 480px) {
  .marcas {
    grid-template-columns: 1fr;
  }

  .marcas img {
    width: 140px;
  }
}


/* =============================
   CARDS DE SERVIÇOS
   ============================= */
/* Título vermelho escuro centralizado e grande */
.titulo-vermelho {
  font-size: 32px;
  font-weight: 800;
  color: #a00;
  margin-bottom: 40px;
  text-align: center;
}

/* Estilo específico para a seção de cards */
.cards-tecnica .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.cards-tecnica .cards div {
  width: 300px;
  text-align: center;
}

.cards-tecnica .cards img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 15px;
}

.cards-tecnica .cards p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}


/* =============================
   SEÇÃO SOBRE A EMPRESA (Com fundo imagem, overlay e logo)
   ============================= */
.sobre-nos {
  position: relative;
  background-image: url('../imagens/banner_vermelho.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
  overflow: hidden;
}

/* Sobreposição vermelha escura semi-transparente */
.sobre-nos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(170, 0, 0, 0.8); 
  z-index: 1;
}

/* Logo branco centralizada */
.logo-sobre {
  position: relative;
  z-index: 2;
  max-width: 260px;
  margin: 0 auto 40px;
  display: block;
}

/* Conteúdo centralizado */
.conteudo-sobre {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}

.conteudo-sobre p {
  margin-bottom: 30px;
}

/* Botão branco com borda arredondada */
.botao-transparente {
  background-color: #fff;             /* Fundo branco */
  color: #a00;                        /* Texto vermelho escuro */
  font-weight: bold;                 /* Texto em negrito */
  font-size: 16px;                   /* Tamanho do texto */
  padding: 12px 30px;                /* Espaçamento interno */
  border-radius: 30px;               /* Borda arredondada */
  text-decoration: none;             /* Remove o sublinhado */
  display: inline-block;             /* Permite margem/padding */
  transition: all 0.3s ease;         /* Transição suave para todos os efeitos */
  box-shadow: 0 0 0 transparent;     /* Sombra inicial nula */
}

/* Efeito ao passar o mouse (hover) */
.botao-transparente:hover {
  background-color: #f8f8f8;         /* Fundo levemente cinza */
  color: #700;                       /* Texto um pouco mais escuro */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Leve sombra ao redor */
  transform: scale(1.03);            /* Leve aumento no tamanho */
}



/* =============================
   SEÇÃO DE AVALIAÇÕES (DEPOIMENTOS)
   ============================= */
.avaliacoes {
  background-color: #fff8f8;          /* Fundo levemente rosado */
  padding: 40px 20px;
  text-align: center;
}

.avaliacoes-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 30px;
}

.avaliacao {
  flex: 1;
  max-width: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra leve */
  text-align: left;
  position: relative;
}

.avaliacao::before {
  content: "❝";                       /* Aspas decorativas */
  font-size: 40px;
  color: #f0c000;
  position: absolute;
  top: -10px;
  left: -10px;
}

.avaliacao p {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.avaliacao em {
  display: block;
  margin-top: 15px;
  font-style: italic;
  color: #900;
}

.botao:hover {
  background-color: #c00;                         /* Vermelho mais claro */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);       /* Sombra suave */
  transform: scale(1.03);                         /* Leve zoom */
}



/* =============================
   RODAPÉ DO SITE
   ============================= */
.footer {
  background-color: #111;
  color: #fff;
  padding: 40px 20px 20px;
  font-family: 'Arial', sans-serif;
}

.container-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto 20px;
}

.coluna-footer {
  flex: 1 1 300px;
  margin: 20px;
}

.coluna-footer h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
}

.coluna-footer p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.coluna-footer span {
  color: #ccc;
}

.coluna-footer strong {
  color: #fff;
}

.coluna-footer .email {
  margin-top: 20px;
}

.mapa iframe {
  border: 1px solid #444;
  border-radius: 8px;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 15px;
  text-align: center;
}

.footer-bottom .logo-footer {
  width: 100px;
  margin-bottom: 10px;
}

.footer-bottom p {
  font-size: 14px;
  color: #ccc;
}



/* =============================
   BOTÃO PADRÃO
   ============================= */
.botao {
  background-color: #a00;
  color: white;
  padding: 12px 30px;
  border-radius: 25px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}


/* =============================
   ÍCONE DO WHATSAPP FIXO
   ============================= */
.whatsapp {
  position: fixed;                    /* Fica fixo na tela */
  bottom: 20px;                       /* Distância da base da tela */
  right: 20px;                        /* Distância da lateral direita */
}

.whatsapp img {
  width: 60px;                        /* Tamanho do ícone */
}

@media (max-width: 768px) {
  .texto-banner {
    position: static;
    transform: none;
    text-align: center;
    background: #a00;
    margin-top: -5px;
  }

  .banner-conserto .banner-img {
    object-fit: cover;
  }
}


html {
  scroll-behavior: smooth;
}

.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; /* Fica acima de tudo */
  }

  .whatsapp img {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
  }

  .whatsapp img:hover {
    transform: scale(1.1);
  }



/* ... [SEUS ESTILOS EXISTENTES] ... */

/* =============================
RESPONSIVIDADE PARA MOBILE
============================= */
@media (max-width: 768px) {
.header-container {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}


.agendamento {
margin-top: 10px;
font-size: 13px;
}


.menu-navegacao {
flex-direction: column;
gap: 10px;
}


.marcas {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}


.marcas img {
width: 140px;
}


.cards-tecnica .cards {
flex-direction: column;
gap: 30px;
}


.banner-conserto .banner-img {
display: none; /* Oculta imagem do banner no mobile */
}


.texto-banner {
position: static;
padding: 20px;
background: #a00;
color: white;
text-align: center;
max-width: 100%;
}


.texto-banner h2 {
font-size: 28px;
}


.texto-banner ul {
font-size: 18px;
}


.sobre-nos {
padding: 60px 15px;
}


.conteudo-sobre {
font-size: 16px;
padding: 0 10px;
}


.footer {
padding: 30px 10px 20px;
}


.container-footer {
flex-direction: column;
align-items: center;
}


.coluna-footer {
margin: 20px 0;
text-align: center;
}


.footer-bottom .logo-footer {
width: 80px;
}


.avaliacoes-container {
flex-direction: column;
gap: 20px;
}
}


@media (max-width: 480px) {
.marcas {
grid-template-columns: 1fr;
}


.marcas img {
width: 120px;
}


.botao,
.botao-branco,
.botao-transparente {
font-size: 14px;
padding: 10px 20px;
}


.whatsapp img {
width: 50px;
height: 50px;
}
}