/* ==========================================
CERTIFICACIONES
========================================== */

.certificaciones-section{
    padding:50px 0;
}

/* TITULO */

.titulo-certificaciones{
    color:var(--azul);
    font-size:3rem;
    font-weight:700;
}

.linea-certificaciones{
    width:120px;
    height:5px;
    margin:15px auto;
    border-radius:20px;

    background:linear-gradient(
        to right,
        var(--verde),
        var(--azul)
    );
}

.subtitulo-certificaciones{
    color:#666;
    font-size:1.1rem;
}

/* ==========================================
IMAGEN
========================================== */

.imagen-certificaciones{

    width:100%;
    max-width:450px;
    height:auto;

    transition:.4s;
}

.imagen-certificaciones:hover{

    transform:scale(1.03);
}

/* ==========================================
CONTENIDO
========================================== */

.certificacion-card{

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);
}

/* TITULO + ICONO */

.titulo-certificado-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;
}

.titulo-certificado-box h2{

    margin:0;

    color:var(--azul);

    font-weight:700;

    font-size:2rem;
}

.icono-certificado{

    flex-shrink:0;

    font-size:4rem;

    color:var(--verde);

    background:rgba(0,168,107,.12);

    padding:12px;

    border-radius:50%;

    transition:.3s;
}

.icono-certificado:hover{

    transform:scale(1.08) rotate(8deg);
}

.certificacion-card p{

    color:#555;

    line-height:1.8;
}

/* ==========================================
TARJETAS
========================================== */

.cert-card{

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

    height:100%;
}

.cert-card:hover{

    transform:translateY(-8px);
}

.cert-card i{

    font-size:3rem;

    color:var(--verde);

    margin-bottom:15px;
}

.cert-card h3{

    color:var(--azul);

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:15px;
}

.cert-card p{

    color:#555;

    line-height:1.6;

    margin:0;
}

/* ==========================================
FRASE
========================================== */

.frase-certificacion{

    background:#f8fafc;

    border-left:6px solid var(--verde);

    padding:25px;

    border-radius:15px;

    text-align:center;
}

.frase-certificacion i{

    color:var(--verde);

    font-size:2rem;

    margin-bottom:15px;
}

.frase-certificacion p{

    margin:0;

    color:#444;

    font-size:1.1rem;

    line-height:1.7;
}

.frase-certificacion .btn{

    margin-top:20px;
}

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

.modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;
}

.modal-header{

    background:#f8fafc;
}

.modal-title{

    color:var(--azul);

    font-weight:700;
}

.numero-contacto{

    color:var(--verde);

    font-size:1.4rem;

    font-weight:bold;

    margin-bottom:8px;
}

/* ==========================================
RESPONSIVE TABLET
========================================== */

@media(max-width:992px){

    .certificaciones-section{

        padding:35px 0;
    }

    .titulo-certificaciones{

        font-size:2.4rem;
    }

    .imagen-certificaciones{

        max-width:360px;
    }

    .titulo-certificado-box{

        flex-direction:column;

        text-align:center;

        gap:18px;
    }

    .titulo-certificado-box h2{

        font-size:1.7rem;
    }

    .icono-certificado{

        font-size:3.3rem;
    }

}

/* ==========================================
RESPONSIVE CELULAR
========================================== */

@media(max-width:576px){

    .certificaciones-section{

        padding:25px 12px 40px;
    }

    .titulo-certificaciones{

        font-size:2rem;
    }

    .subtitulo-certificaciones{

        font-size:.95rem;
    }

    .imagen-certificaciones{

        max-width:280px;
    }

    .certificacion-card{

        padding:22px 18px;
    }

    .titulo-certificado-box h2{

        font-size:1.45rem;
    }

    .certificacion-card p{

        text-align:justify;

        font-size:.95rem;

        line-height:1.7;
    }

    .cert-card{

        padding:22px 18px;
    }

    .cert-card i{

        font-size:2.4rem;
    }

    .cert-card h3{

        font-size:1.2rem;
    }

    .cert-card p{

        font-size:.95rem;
    }

    .frase-certificacion{

        padding:22px 18px;
    }

    .frase-certificacion p{

        font-size:1rem;
    }

    .frase-certificacion .btn{

        width:100%;
    }

    .numero-contacto{

        font-size:1.2rem;
    }

}