.recientes-main{
    background-color: #f5f5f5;
    padding: 0 20px;
    font-family:'Open Sans', sans-serif;
    font-size:17px;
    margin-bottom: 30px;
}

.reciente-titulo {
    position: relative;
    padding: 30px 0;
    text-align: center;
}

.reciente-titulo h2 {
    position: relative;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    z-index: 1;
    background-color: #f5f5f5;
    display: inline-block;
    padding: 0 20px;
}

.reciente-titulo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #ddd;
    z-index: 0;
}

@media (min-width: 768px){
    .recientes-main{
        padding: 0 30px;
    }
    .reciente-titulo h2 {
        position: relative; /* Asegura que el texto esté por encima de la línea */
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        z-index: 1;
        background-color: #f5f5f5;
        display: inline-block;
        padding: 0 20px;
    }
    .reciente-titulo::before {
        height: 2.5px;
    }
}

.recientes-contenido{
    display: flex;
    justify-content:space-between;
    font-family:'Saira Condensed', sans-serif;
    padding-left: 5px;
}

.recientes-tarjeta {
    max-width: 270px;
    text-align: center;
    margin: 10px 10px 25px 10px;
    padding: 0;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}
/* Esta clase servirá para que nunca cambie el alineado de las tarjetas en mobile */
@media (max-width: 768px) {
    .swiper{
        padding-inline: 42px;
    }
    .recientes-contenido{
        justify-content: space-between !important;
    }
}

@media (min-width: 768px) {
    .recientes-contenido{
        padding-left: 7px;
    }
    .recientes-tarjeta {
        max-width: 337px;
    }
}

.recientes-tarjeta:hover {
    -webkit-transform: translateY(-5px); /* Safari y navegadores basados en WebKit */
    transform: translateY(-5px);
    box-shadow: rgba(50, 50, 93, 0.2) 0px 15px 27px -6px, rgba(0, 0, 0, 0.25) 0px 9px 15px -9px;
}

.recientes-tarjeta:hover a {
    color: #ff5722;
}

.recientes-tarjeta_imagen {
    overflow:hidden;
    border-radius: 8px 8px 0 0;
}

.recientes-tarjeta_imagen img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    transition: transform 0.3s ease;
}

@media (min-width: 768px)
{
    .recientes-tarjeta_imagen img {
        height: 250px;
    }
}

@media (min-width: 1025px)
{
    .recientes-tarjeta_imagen img {
        height: 250px;
    }
}


.recientes-tarjeta:hover .recientes-tarjeta_imagen img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.recientes-tarjeta_detalles {
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding: 20px 15px;
}

.recientes-tarjeta_detalles a {
    color: #121212;
    font-size: 19px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recientes-tarjeta_detalles a:hover {
    text-decoration: none;
}

.recientes-tarjeta_detalles span {
    font-weight: 600;
}
/* Estilos para el slider */
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    font-size: 60px;
    font-weight: 900;
    padding: 15px;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    font-size: 60px;
    font-weight: 900;
    padding: 15px;
}
/* Estilos para el loader */
.loader {
    display: flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
}
.loader::after{
    transform: rotate3d(90, 90, 0, 180deg );
    border-color: #FF3D00;
}

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
}