/*=====================================================
    PORTAL DE TRANSPARENCIA
======================================================*/

:root{

    --color-principal:#374151;
    --color-secundario:#4B5563;
    --color-acento:#7A1F3D;
    --color-fondo:#F5F6F8;
    --color-card:#FFFFFF;
    --color-texto:#6B7280;
    --color-borde:#E5E7EB;

}

.transparencia{

    padding:90px 25px;


}

.contenedor{

    max-width:1300px;
    margin:auto;

}

/*=====================================================
                    TITULO
======================================================*/

.titulo-transparencia{

    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:65px;

}

.etiqueta{

    display:inline-block;

    padding:10px 22px;

    background:#EFEFEF;

    color:var(--color-acento);

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    letter-spacing:.6px;

    margin-bottom:20px;

}

.titulo-transparencia h2{

    font-size:42px;

    color:var(--color-principal);

    font-weight:700;

    margin-bottom:20px;

}

.titulo-transparencia p{

    color:var(--color-texto);

    font-size:18px;

    line-height:1.9;

}

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

.cards-transparencia{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

/*=====================================================
                    TARJETA
======================================================*/

.card-transparencia{

    background:var(--color-card);

    border-radius:22px;

    padding:40px 35px;

    text-align:center;

    text-decoration:none;

    color:inherit;

    border-top:5px solid var(--color-acento);

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.card-transparencia::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.8s;

}

.card-transparencia:hover::before{

    left:120%;

}

.card-transparencia:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}

/*=====================================================
                    LOGO
======================================================*/

.logo-card{

    width:150px;

    height:150px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#FAFAFA;

    border:1px solid var(--color-borde);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.card-transparencia:hover .logo-card{

    transform:scale(1.05);

    box-shadow:0 15px 35px rgba(122,31,61,.12);

}

.logo-card img{

    max-width:95px;

    max-height:95px;

    width:auto;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.35s;

}

.card-transparencia:hover .logo-card img{

    transform:scale(1.05);

}

/*=====================================================
                TITULO TARJETA
======================================================*/

.card-transparencia h3{

    font-size:24px;

    color:var(--color-principal);

    margin-bottom:18px;

    font-weight:700;

    min-height:65px;

}

/*=====================================================
                    TEXTO
======================================================*/

.card-transparencia p{

    color:var(--color-texto);

    font-size:16px;

    line-height:1.8;

    min-height:120px;

}

/*=====================================================
                    BOTON
======================================================*/

.enlace{

    display:inline-block;

    margin-top:25px;

    padding:13px 30px;

    background:var(--color-secundario);

    color:#FFF;

    text-decoration:none;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.card-transparencia:hover .enlace{

    background:var(--color-acento);

}

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

@media(max-width:992px){

    .titulo-transparencia h2{

        font-size:36px;

    }

}

@media(max-width:768px){

    .transparencia{

        padding:70px 20px;

    }

    .titulo-transparencia{

        margin-bottom:45px;

    }

    .titulo-transparencia h2{

        font-size:30px;

    }

    .titulo-transparencia p{

        font-size:16px;

    }

    .card-transparencia{

        padding:35px 25px;

    }

    .logo-card{

        width:130px;
        height:130px;

    }

    .logo-card img{

        max-width:80px;
        max-height:80px;

    }

}