/* SOBRE NOS - CSS RESPONSIVO COMPLETO */

/* Desktop styles (layout original) */
.missao-visao {
   background-color: var(--cinza-00);
   width: 100%;
   margin: 0;
   display: flex;
   min-height: 300px;
   margin-top: 2rem;
}

.imagem-section {
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat;
}

.texto {
   padding-top: 50px;
   padding-left: 50px;
   padding-right: 80px;
   text-align: justify;
}

.texto h2 {
   font-size: 2.2rem;
   color: var(--azul-destaque);
}

.texto p {
   font-size: 1.2rem;
   line-height: 1.6;
   color: var(--cinza-75);
}

.texto p strong {
   color: var(--azul-destaque);
   font-weight: 600;
}

.valores {
   background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/fundo_valores.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   width: 100%;
   margin: 0;
   display: flex;
   min-height: 300px;
   margin-top: 3rem; 
   display: flex;
   flex-direction: column;
   padding: 30px;
}

.valores h1 {
   color: white;
   font-size: 2.5rem;
   text-align: center;
}

.valores h2 {
   color: var(--azul-claro);
   font-size: 1.5rem;
   text-align: center;
   margin-top: 2rem;
}

.valores p {
   color: var(--cinza-00);
   font-size: 18px;
   text-align: center;
   margin-top: 1rem;
}

/* RESPONSIVE BREAKPOINTS */

/* Tablet */
@media screen and (max-width: 1024px) {
   .texto {
      padding: 40px 30px;
   }
   
   .texto h2 {
      font-size: 2rem;
   }
   
   .texto p {
      font-size: 1.1rem;
   }
   
   .missao-visao {
      min-height: 250px;
   }
}

/* Mobile - Principal */
@media screen and (max-width: 768px) {
   /* Container e títulos principais */
   .container {
      padding: 0 15px;
   }
   
   .titulo-sessao {
      font-size: 2.2rem !important;
      text-align: center !important;
      margin-top: 2rem !important;
      margin-bottom: 1.5rem !important;
   }
   
   .paragrafo-2 {
      width: 95% !important;
      font-size: 16px !important;
      text-align: justify !important;
      margin-top: 2rem !important;
      line-height: 1.5 !important;
   }
   
   /* Layout das seções - Empilhamento vertical */
   .missao-visao {
      flex-direction: column !important;
      margin-top: 2rem !important;
      min-height: auto !important;
      background-color: var(--cinza-00) !important;
   }
   
   /* Forçar 100% de largura para ambas as divs */
   .missao-visao > div,
   .missao-visao .imagem-section,
   .missao-visao .texto {
      width: 100% !important;
      flex: none !important;
   }
   
   /* Imagem sempre primeiro */
   .missao-visao .imagem-section {
      order: 1 !important;
      min-height: 200px;
      background-size: cover !important;
      background-position: center !important;
   }
   
   /* Texto sempre segundo */
   .missao-visao .texto {
      order: 2 !important;
      padding: 30px 20px !important;
      text-align: center !important;
   }
   
   /* Estilos do texto mobile */
   .texto h2 {
      font-size: 1.8rem !important;
      text-align: center !important;
      color: var(--azul-destaque) !important;
      margin-bottom: 20px !important;
   }
   
   .texto p {
      font-size: 1rem !important;
      line-height: 1.5 !important;
      text-align: justify !important;
      margin-top: 15px !important;
      color: var(--cinza-75) !important;
   }
   
   /* Override para alinhamentos específicos do desktop */
   .missao-texto h2 {
      text-align: center !important;
   }
   
   .missao-texto p {
      text-align: justify !important;
   }
   
   /* Valores específicos */
   .texto p strong {
      color: var(--azul-destaque) !important;
      font-weight: 600 !important;
   }
   
   /* Seção de valores */
   .valores {
      margin-top: 2rem !important;
      padding: 25px 20px !important;
      min-height: auto !important;
      background-attachment: scroll !important;
   }
   
   .valores h1 {
      font-size: 2rem !important;
   }
   
   .valores h2 {
      font-size: 1.3rem !important;
   }
   
   .valores p {
      font-size: 16px !important;
      text-align: justify !important;
   }
}

/* Mobile pequeno */
@media screen and (max-width: 480px) {
   .titulo-sessao {
      font-size: 1.8rem !important;
   }
   
   .paragrafo-2 {
      font-size: 15px !important;
      width: 98% !important;
   }
   
   .missao-visao .imagem-section {
      min-height: 160px !important;
   }
   
   .texto {
      padding: 25px 15px !important;
   }
   
   .texto h2 {
      font-size: 1.6rem !important;
   }
   
   .texto p {
      font-size: 0.9rem !important;
   }
   
   .valores {
      padding: 20px 15px !important;
   }
   
   .valores h1 {
      font-size: 1.8rem !important;
   }
   
   .valores h2 {
      font-size: 1.2rem !important;
   }
   
   .valores p {
      font-size: 15px !important;
   }
}

/* Orientação paisagem para mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
   .missao-visao .imagem-section {
      min-height: 140px !important;
   }
   
   .texto {
      padding: 20px 15px !important;
   }
   
   .titulo-sessao {
      font-size: 2rem !important;
   }
}

/* Utility classes para mobile */
@media screen and (max-width: 768px) {
   .mobile-center {
      text-align: center !important;
   }
   
   .mobile-justify {
      text-align: justify !important;
   }
   
   .mobile-full-width {
      width: 100% !important;
   }
}