.elementor-1194 .elementor-element.elementor-element-8077a09{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f79d0da *//* ------------------------------------------------------------------------------------------------
   1. LAYOUT GRID (ESTRUTURA PRINCIPAL)
   Define o layout de 4 colunas (o mosaico)
------------------------------------------------------------------------------------------------ */

.grid-certifica {
    display: grid;
    /* Define 4 colunas de tamanho igual */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* Espaçamento entre os cards */
    max-width: 1200px; /* Limite a largura para um melhor design */
    margin: 0 auto;
    padding: 20px;
}

/* ------------------------------------------------------------------------------------------------
   2. POSICIONAMENTO E TAMANHOS ESPECÍFICOS (Conforme a imagem)
------------------------------------------------------------------------------------------------ */

/* Card Docnuvem (Ocupa 2 linhas) */
.grid-certifica .card-preto-grande {
    grid-row: span 2;
    /* Ajuste de colunas para encaixar os outros cards se necessário */
    grid-column: span 1; 
}

/* Imagem Central (Ocupa 2 colunas e 2 linhas) */
.grid-certifica .card-imagem-central {
    grid-column: span 2;
    grid-row: span 2;
    overflow: hidden;
    padding: 0;
    border-radius: 0; /* A imagem não terá a borda do card */
}

.grid-certifica .card-imagem-central img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

/* ------------------------------------------------------------------------------------------------
   3. ESTILOS VISUAIS, CORES E BASE DO CARD
------------------------------------------------------------------------------------------------ */

.grid-certifica .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empurra o conteúdo para cima e a seta para baixo */
    padding: 20px;
    border-radius: 8px;
    text-decoration: none; /* Remove sublinhado do link */
    color: #333; /* Cor padrão do texto (para cards claros) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para o hover */
    min-height: 150px; /* Altura mínima para melhor visualização */
}

.grid-certifica h3 {
    margin-top: 0;
    font-size: 1.5em; /* Título maior */
    line-height: 1.2;
}

.grid-certifica p {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Cores de Fundo e Texto BASE */
.card-branco { background-color: #f0f0f0; color: #333; }
.card-azul { background-color: #4dc2ed; color: #fff; } /* Fundo escuro */
.card-verde { background-color: #66c78b; color: #fff; } /* Fundo escuro */
.card-preto, .card-preto-grande { background-color: #2e2e2e; color: #fff; } /* Fundo escuro */
.card-laranja { background-color: #B9963C; color: #fff; } /* Fundo escuro */
.card-cinza-claro { background-color: #e6e6e6; color: #333; }
.card-roxo { background-color: #a778e8; color: #fff; } /* Fundo escuro */

/* REFORÇO: Define a cor do texto para branco (#fff) nos cards escuros */
.card-azul h3, .card-azul p,
.card-verde h3, .card-verde p,
.card-preto h3, .card-preto p, .card-preto-grande h3, .card-preto-grande p,
.card-laranja h3, .card-laranja p,
.card-roxo h3, .card-roxo p {
    color: #fff; /* O texto será branco */
    /* Garante que o parágrafo também seja branco, com opacidade para contraste */
    opacity: 1; 
}

.card-azul p, .card-verde p, .card-preto p, .card-preto-grande p, .card-laranja p, .card-roxo p {
    opacity: 0.8; /* Mantém a opacidade apenas para o parágrafo, para dar um toque mais suave */
}


/* ------------------------------------------------------------------------------------------------
   4. EFEITO HOVER (AUMENTAR/DESTAQUE)
------------------------------------------------------------------------------------------------ */

.card-hover-efeito:hover {
    transform: scale(1.03); /* Aumenta o card em 3% */
    z-index: 10; /* Traz para frente */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

/* ------------------------------------------------------------------------------------------------
   5. ESTILO DAS SETAS (ÍCONES)
------------------------------------------------------------------------------------------------ */

.icon-arrow {
    align-self: flex-end; /* Posiciona a seta no canto inferior direito */
    font-size: 1.5em;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    margin-top: 10px;
}

/* Cores da seta */
.arrow-branco { background-color: rgba(255, 255, 255, 0.3); color: #fff; }
.arrow-cinza { background-color: rgba(0, 0, 0, 0.1); color: #333; }
.arrow-preto { background-color: rgba(0, 0, 0, 0.3); color: #fff; }

/* ------------------------------------------------------------------------------------------------
   6. RESPONSIVIDADE (Para tablets e celulares)
------------------------------------------------------------------------------------------------ */

/* Tablets (Abaixo de 1024px) */
@media (max-width: 1024px) {
    .grid-certifica {
        grid-template-columns: repeat(2, 1fr); /* Reduz para 2 colunas */
    }
    
    /* Reset o tamanho dos cards que eram maiores */
    .grid-certifica .card,
    .grid-certifica .card-preto-grande,
    .grid-certifica .card-imagem-central {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Celulares (Abaixo de 767px) */
@media (max-width: 767px) {
    .grid-certifica {
        grid-template-columns: 1fr; /* 1 coluna em celular */
    }
}/* End custom CSS */