.ver-mas {
            
    font-size: 1rem; /* Ajusta el tamaño de la fuente según necesites */
    color: #007bff; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado */
    padding: 10px 20px; /* Añade padding para que parezca un botón */
    border: 1px solid #007bff; /* Añade un borde */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
    cursor: pointer; /* Cambia el cursor a una mano para indicar que es clickeable */
}

.ver-mas:hover {
    background-color: #007bff; /* Cambia el color de fondo al hacer hover */
    color: #fff; /* Cambia el color del texto al hacer hover */
    text-decoration: none; /* Asegura que no haya subrayado en hover */
}




body {
    
    font-family: 'Josefin Sans', sans-serif;
    
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px;
    padding: 20px;
}

.card {
    position: relative;
    width: 205px;
    height: 130px;
    transform-style: preserve-3d;
    perspective: 600px;
    transition: transform 0.5s;
}


.card .front, .card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.5s;
}

.card .front {
    background: #000;
}

.card .front img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border:2px solid rgb(132, 194, 37);
}

.card:hover .front {
    transform: rotateY(180deg);  
}

.card .back {
    background: #000;
    transform: rotateY(180deg);
}

.card:hover .back {
    transform: rotateY(0deg);  
}

.card .back .details {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.card .back .details h2 {
    margin: 0;
    padding: 0;
    font-size: calc(0.3em + 0.3vw);
    color: #fff;
}

.card .back .details h3 {
    color: #a7a7a7;
    font-size: calc(0.3em + 0.3vw);;
    padding: 0;
    margin: 10px 0 12px;
}

.card .back .details i {
    
    font-size: calc(0.3em + 0.3vw);;
    
}



@media(max-width: 500px) {
    .card .back .details h2 {                
        font-size: calc(0.4em + 0.4vw);                
    }

    .card .back .details h3 {                
        font-size: calc(0.4em + 0.4vw);;                
    }

    .card-container {
        justify-content: center;
        gap: 10px;
        padding: 20px;
    }
    

    .card {            
        width: 145px;
        height: 90px;
    }

}

.social-icons {
    margin-top: -7px;
}

.social-icons a {
    display: inline-block;
    width: 33px;
    height: 33px;
    text-align: center;
    background: #262626;
    color: #fff;
    font-size: calc(0.4em + 0.4vw);
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.5s;
}

.social-icons a + a {
    margin-left: 6px;
}

.social-icons a .fa {
    line-height: 36px;
}

.social-icons a:hover {
    background: rgb(132, 194, 37);
}

.titulo {
    margin-left:3%;

}