/* css\equipe.css */

/* Se você já tem um arquivo equipe.css, apague o conteúdo antigo 
  (com #equipe-carrio) e use este.
*/

/* Estilo base para as 3 caixas da esquerda.
  Usamos flexbox para centralizar o conteúdo verticalmente
  e garantir que todas tenham a mesma altura (flex-grow: 1).
*/
#equipe .equipe-caixa {
    padding: 3.5rem 2.5rem; /* Espaçamento interno generoso */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Cor de fundo da Coluna da Direita (Título)
  Cor: #009691
*/
#equipe .equipe-coluna-titulo {
    background-color: #009691;
    /* Altura mínima para garantir que o título tenha espaço, 
       especialmente no mobile */
    min-height: 450px; 
}

/* Caixa 1: Designer 
  Fundo: #009691 | Texto: Branco (via classe .text-white)
*/
#equipe .equipe-caixa-designer {
    background-color: #009691;
}

/* Caixa 2: Gestores 
  Fundo: Branco | Texto: #009691
*/
#equipe .equipe-caixa-gestores {
    background-color: #ffffff;
    color: #009691;
}

/* Caixa 3: Especialistas
  Fundo: #00DCDA | Texto: Branco (via classe .text-white)
*/
#equipe .equipe-caixa-especialistas {
    background-color: #00DCDA;
}

.equipe {
    color: #00DCDA;
}

/* Ajuste para telas de tablet e menores (abaixo de 992px)
  onde as colunas empilham.
*/
@media (max-width: 991.98px) {
    #equipe .equipe-coluna-titulo {
        min-height: 350px; /* Reduz a altura mínima no mobile */
    }

    #equipe .equipe-caixa {
         /* Reduz o padding no mobile */
        padding: 2.5rem 1.5rem;
        /* Alinha o texto à esquerda no mobile */
        text-align: left; 
    }
}