@charset "utf-8";
/* CSS Document */

.galerias-certificados{

    width:100%;
    height:320px;

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

    gap:50px;

    background:rgb(255,255,255);
}


/* placas */

.placa{
    width:260px;
    height:140px;
    background:white;
    border-radius:8px;
    border:2px solid rgb(0,76,151);

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

    text-align:center;
    padding:18px;
    gap:10px;

    text-decoration:none;
    font-size:var(--fs-xs);
    font-weight:800;
    color:rgb(0,115,119);

    cursor:pointer;
    transition:.25s;
    box-shadow:0 3px 8px rgba(0,0,0,.08);

    white-space: normal;      /* permite salto de línea */
    word-wrap: break-word;    /* evita desbordes */

}


/* segunda placa */

.placa:nth-child(2){
    border-color:rgb(0,115,119);
}


/* icono */

.icono{
	border: 0px solid #FF0000;
    width:40px;
    height:40px;
    flex: 0 0 40px;
    margin:-10px 0 0 -200px;
    background-color: rgb(0,76,151); /* aquí defines el color */
    mask: url(../img/certificados_389-511.svg) no-repeat center / contain;
    -webkit-mask: url(../img/certificados_389-511.svg) no-repeat center / contain;
}

/* textos */

.placa p{
    font-size:15px;
    font-weight: bold;
    color:rgb(0,115,119);
    line-height:1.2;
    max-width: 100%;
    margin:-10px 0 0 0;
}


/* hover institucional */

.placa:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    border-color:rgb(0,115,119);
}

/* Iconos para los botones de Solicitud ya registrada */
/* texto */
.texto{
    line-height:1.2;
}

/* base icono */
.icono{
    width:40px;
    height:40px;
    background-color: currentColor; /* hereda color del botón */

    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;

    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
}

/* iconos individuales */
.icono-modificar, .icono-visualizar, .icono-subir{
    width:45px;
    height:45px;
    object-fit:contain;

    display:block;           /* evita alineación inline rara */
    margin:0 auto;           /* centra horizontalmente */

    transform:translateY(-6px) scale(1); /* translateY(-6px) lo sube un poco */
    opacity:0.70;

    transition: transform .25s ease, opacity .25s ease;
}

.placa:hover .icono-modificar, .placa:hover .icono-visualizar, .placa:hover .icono-subir{
    width:50px;
    height:50px;
    opacity:1;
}

/* responsive */

@media (max-width:768px){

    .galerias-certificados{

        flex-direction:column;

        height:auto;

        padding:40px 0;
    }

}