/* Aplicar box-sizing globalmente para evitar problemas de layout */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1. Seção "Quem Somos" com fundo vermelho */
.quem-somos-section {
  width: 100%;
  background: #BB0606; /* Fundo vermelho sólido */
  position: relative;
  overflow: hidden;
}

/* 2. Contêiner centralizado (desktop) */
.quem-somos-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  min-height: 400px;
  margin: 0 auto;
  padding: 0;
}

/* 3. Seção de texto (desktop) */
.texto {
  flex: 1;
  max-width: 50%;
  color: white;
  padding: 20px;
}

.texto h1 {
  font-size: 48px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.texto p {
  font-size: 20px;
  line-height: 1.6;
}

/* 4. Container da imagem (desktop) */
.imagem-container {
  flex: 1;
  max-width: 50%;
  position: relative;
  height: 600px;  /* Altura definida para desktop */
  overflow: hidden;
}

/* A imagem preenche o container; como usamos fill no Next.js Image,
   é necessário que a imagem esteja posicionada de forma absoluta */
.imagem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. Gradiente sobre a imagem */
.gradiente {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(187, 6, 6, 1.5), rgba(187, 6, 6, 0));
  pointer-events: none;
}

/* 6. Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  /* Empilhar os elementos verticalmente */
  .quem-somos-container {
    flex-direction: column;
    min-height: 600px;
  }
  
  /* Texto centralizado */
  .texto {
    max-width: 100%;
    max-height: 280px;
    padding: 20px 20px;
  }
  
  .texto h1 {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .texto p {
    font-size: 16px;
  }
  
  /* Ajusta o container da imagem para que ocupe 100% da largura da viewport e preencha todo o espaço */
  .imagem-container {
    width: 100vw;                     /* Ocupa 100% da largura da viewport */
    margin-left: calc(50% - 50vw);     /* "Quebra" o container centralizado para centralizar na tela */
    height: 400px;                    /* Altura definida; ajuste conforme necessário */
    margin-top: 20px;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
    position: relative;               /* Garante que o Next.js Image (com fill) preencha este container */
    max-width: 100%;
  }
  
  /* A imagem já está definida para preencher 100% do container */
  .imagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Gradiente em mobile */
  .gradiente {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(187, 6, 6, 1.5), rgba(187, 6, 6, 0));
  }
}