/* =========================
   CERTIFICADOS
========================= */

.box-certificados {
    width: min(1100px, 90%);

    margin: 5rem auto 0;
}


/* =========================
   TÍTULO DA SEÇÃO
========================= */

.certificados-heading {
    margin-bottom: 2.5rem;
}

.certificados-heading > span {
    display: inline-block;

    margin-bottom: 12px;

    color: #00AECA;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.certificados-heading h3 {
    margin: 0 0 12px;

    color: #F1F5F9;

    font-size: 2rem;
    font-weight: 700;
}

.certificados-heading p {
    margin: 0;

    color: #718096;

    font-size: 14px;
}


/* =========================
   GRID
========================= */

.certificados {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 2rem;
}


/* =========================
   CARD
========================= */

.certificado {
    width: 100%;
    min-width: 0;

    background: linear-gradient(
        135deg,
        rgba(0, 175, 202, 0.12) 0%,
        var(--primary-color) 35%,
        var(--primary-color) 70%,
        rgba(52, 82, 255, 0.08) 100%
    );

    border: 1px solid rgba(74, 122, 173, 0.45);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);

    transition: 0.3s ease;
}

.certificado:hover {
    transform: translateY(-6px);

    border-color: var(--tertiary-color);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(100, 60, 255, 0.12);
}


/* =========================
   MINIATURA
========================= */

.certificado-imagem {
    display: block;

    position: relative;

    width: 100%;

    padding: 0;

    border: 0;

    background: #0A121E;

    cursor: pointer;

    overflow: hidden;
}

.certificado-imagem img {
    display: block;

    width: 100%;
    height: 240px;

    object-fit: cover;

    object-position: center;

    transition: transform 0.4s ease;
}

.certificado:hover .certificado-imagem img {
    transform: scale(1.04);
}


/* =========================
   OVERLAY DE AMPLIAÇÃO
========================= */

.certificado-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: rgba(5, 12, 22, 0.65);

    color: #FFFFFF;

    font-size: 13px;
    font-weight: 600;

    opacity: 0;

    transition: opacity 0.3s ease;
}

.certificado:hover .certificado-overlay,
.certificado-imagem:focus-visible .certificado-overlay {
    opacity: 1;
}

.certificado-overlay i {
    color: #00AECA;

    font-size: 18px;
}


/* =========================
   INFORMAÇÕES
========================= */

.certificado-info {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 22px;
}

.certificado-categoria {
    width: fit-content;

    padding: 5px 10px;

    border-radius: 5px;

    background: linear-gradient(
        90deg,
        #283F9B,
        #5A39C9
    );

    color: #D9DCFF;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.certificado-info h4 {
    margin: 0;

    color: #F2F4F8;

    font-size: 1.15rem;
    font-weight: 700;
}

.certificado-info p {
    margin: 0;

    color: #9BA8B8;

    font-size: 14px;
}


/* =========================
   MODAL
========================= */

.modal-certificado {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(3, 8, 15, 0.88);

    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.modal-certificado.ativo {
    opacity: 1;
    visibility: visible;
}

.modal-certificado-conteudo {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(100%, 1100px);
    max-height: 90vh;
}

.modal-certificado-conteudo img {
    display: block;

    max-width: 100%;
    max-height: 85vh;

    object-fit: contain;

    border: 1px solid rgba(0, 174, 202, 0.35);

    border-radius: 10px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(0, 174, 202, 0.08);
}


/* BOTÃO FECHAR */

.modal-certificado-fechar {
    position: absolute;

    top: -45px;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(0, 174, 202, 0.3);

    border-radius: 8px;

    background: rgba(10, 18, 30, 0.95);

    color: #AAB7C4;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s ease;
}

.modal-certificado-fechar:hover {
    color: #FFFFFF;

    border-color: #00AECA;

    background: rgba(0, 174, 202, 0.12);
}


/* =========================
   RESPONSIVIDADE
========================= */

@media (max-width: 1000px) {

    .certificados {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .box-certificados {
        width: 90%;
    }

    .certificados {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .certificado-imagem img {
        height: 220px;
    }

    .certificado-info {
        padding: 20px;
    }

    .modal-certificado {
        padding: 20px;
    }

    .modal-certificado-fechar {
        top: -45px;
    }

}