body {
    font-family: 'Outfit', sans-serif;
}
#row-curso{
    padding-left: 10% !important; /* Mueve todo más a la izquierda */
    padding-right: 5%;
    padding-bottom: 5%;}
#titulo-curso{
    font-weight: 600;
    size: 36px;
    line-height: 40px;
}
#text-curso{
    font-weight: 400;
    size: 16px;
    line-height: 20px;
    padding-bottom: 10px;
}
.btn1-vertodos {
    background-color: var(--color-button-servicios);
    color: var(--color-textwhiteButtons);
    border-radius: 20px;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-block;
    margin: 10px ;
}
#title-slider{
    font-weight: 700;
    size: 22px;
    line-height: 26px;
}
#car-img, #car-img-2, #car-img-3 {
    position: relative;
    overflow: hidden; /* Mantenemos el ocultamiento del contenido extra */
}
.swiper-wrapper {
    display: flex;
    align-items: center;
    scroll-snap-type: x mandatory;
}
.swiper-slide {
    flex-shrink: 0;
    width: calc(100% / 2.5); /* Ajusta el ancho para que quepan 2.5 tarjetas */
    scroll-snap-align: start;
}
/* Gradiente izquierdo */
.swiper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px; /* Aumenta el ancho del gradiente */
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: var(--color-Body); /* Usar la variable CSS */
    opacity: 1; /* Asegúrate de que sea visible */
}

/* Gradiente derecho */
.swiper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 800px;
    right: 0;
    width: 80px; /* Aumenta el ancho del gradiente */
    height: 100%;
    pointer-events: none;
    z-index: 2;
    --color-Body: rgba(255, 255, 255, 0.5); /* Color claro */
    opacity: 1; /* Asegúrate de que sea visible */
}

/* Oculta gradientes por defecto */
.swiper::before,
.swiper::after {
    opacity: 0; /* Gradientes ocultos inicialmente */
    transition: opacity 0.3s ease;
}

/* Muestra gradiente izquierdo */
.swiper.show-left-gradient::before {
    opacity: 1;
    background: var(--gradiant-shadowcards-izq);
    border: none;
    width: 300px;
}

/* Muestra gradiente derecho */
.swiper.show-right-gradient::after {
    opacity: 1;
    background: var(--gradiant-shadowcards);
    border: none;
    width: 300px;
}

@media (max-width: 600px) {
    .swiper.show-left-gradient::before,
    .swiper.show-right-gradient::after {
        display: none !important;

    }
}

#btn-car-prev-img-1, #btn-car-prev-img-2, #btn-car-prev-img-3 ,
#btn-car-img-1,#btn-car-img-2, #btn-car-img-3 {
    width: 38px;
    height: 38px;
    background-color: var(--color-celesteprimario);
    border-radius: 50%;
    padding: 7px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.cardportema {
    border-radius: 20px;
    text-align: center;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    text-align: left;
    background-position: center;
}
.titlepotema {
    font-weight: bold;
    font-size: 16px;
}
.titlepotema  {
    font-weight: bold;
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
    color: var(--color-whiteforwhite);
}
.color-Image1 {
    max-width: 100%;
    background: var(--color--gradientecursosportema),
                url('../images/img-familia.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    height: 11rem;
}
.color-Image1:hover {
    transform: scale(1.05);
}
.color-Image2 {
    max-width: 100%;
    height: cover;
    background-image:var(--color--gradientecursosportema),
     url('../images/img-virgenmaria.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.color-Image2:hover {
    transform: scale(1.05);
}
.color-Image3 {
    max-width: 100%;
    height: cover;
    background-image: var(--color--gradientecursosportema),
    url('../images/img-vida.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.color-Image3:hover {
    transform: scale(1.05);
}
.color-Image4 {
    max-width: 100%;
    height: cover;
    background-image: var(--color--gradientecursosportema),
                      url('../images/Iglesia_magisterio.jpg');
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 11rem;
}
.color-Image4:hover {
    transform: scale(1.05);
}
.dark-theme .color-Image1 {
    background-image:var(--color--gradientecursosportema),url('../images/img-familia.jpg');
    transition: transform 0.3s ease;
}
.dark-theme .color-Image1:hover {
    transform: scale(1.05);
}
.dark-theme .color-Image2 {
    background-image: var(--color--gradientecursosportema),url('../images/img-virgenmaria.jpg');
    transition: transform 0.3s ease;
}
.dark-theme .color-Image2:hover {
    transform: scale(1.05);
}
.dark-theme .color-Image3 {
    background-image:var(--color--gradientecursosportema), url('../images/img-vida.jpg');
    transition: transform 0.3s ease;
}
.dark-theme .color-Image3:hover {
    transform: scale(1.05);
}
.dark-theme .color-Image4 {
    background-image:var(--color--gradientecursosportema), url('../images/iglesia_magisterio.jpg');
    transition: transform 0.3s ease;
}
.dark-theme .color-Image4:hover {
    transform: scale(1.05);
}
 @media (min-width: 320px) {
    #row-curso {
        padding-left: 0% !important;
        padding-right: 0%;
    }
    #car-img {
        padding-left: 3%;
        padding-right: 5%;
    }
    .cardportema {
        width: 235px !important;
        height: 172px !important;
    }
    #btn-car-prev-img, #btn-car-prev-img-2, #btn-car-prev-img-3 {
        display: none;
    }
}
@media (min-width: 375px)  {
    #row-curso{
    padding-left: 10% !important; /* Mueve todo más a la izquierda */
    padding-right: 5%;
    padding-bottom: 5%;
}
    .cardportema {
        width: 235px !important;
        height: 172px !important;
    }
}
@media (min-width: 540px) {
    #row-curso{
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .cardportema{
        width: 235px !important;
        height: 172px !important;
    }
    #btn-car-prev-img, #btn-car-prev-img-2, #btn-car-prev-img-3 {
        width: 38px;
        height: 38px;
        background-color: var(--color-celesteprimario);
        border-radius: 50%;
        padding: 7px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }
}

@media (min-width: 905px)  {
    .cardportema {
        width: 328px !important;
        height: 196px !important;
    }
}
@media (min-width: 1024px) {
    #row-curso {
        padding-left: 15%;
        padding-right: 12%;
        padding-bottom: 5%;
        /* padding: 0px 339px 300px 0px !important; */
    }
    .swiper::after {
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .swiper::before {
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .dark-theme .swiper::after {
        background: linear-gradient(to left, rgb(72, 70, 70) 0%, rgba(8, 8, 8, 0.279) 100%);
    }
    .dark-theme .swiper::before {
        background: linear-gradient(to right, rgb(72, 70, 70) 0%, rgba(8, 8, 8, 0.279) 100%);
    }
    .cardportema{
        width: 328px !important;
        height: 196px !important;
    }
    #btn-car-prev-img, #btn-car-prev-img-2, #btn-car-prev-img-3 {
        width: 38px;
        height: 38px;
        background-color: var(--color-celesteprimario);
        border-radius: 50%;
        padding: 7px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }
}
/*      estilos NO compartidos para los_mas_populares.php      */
.popular-Image1 {
    max-width: 100%;
    background: var(--color--gradientecursosportema),
                url('../images/Conociendo-a-Maria.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    height: 11rem;
}
.popular-Image1:hover {
    transform: scale(1.05);
}
.popular-Image2 {
    max-width: 100%;
    height: cover;
    background-image:var(--color--gradientecursosportema),
     url('../images/excomunionCourse.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.popular-Image2:hover {
    transform: scale(1.05);
}
.popular-Image3 {
    max-width: 100%;
    height: cover;
    background-image: var(--color--gradientecursosportema),
    url('../images/bebes_que_mueren_course.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.popular-Image3:hover {
    transform: scale(1.05);
}
.popular-Image4 {
    max-width: 100%;
    height: cover;
    background-image: var(--color--gradientecursosportema),
                      url('../images/Homilia_roca.jpg');
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 11rem;
}
.popular-Image4:hover {
    transform: scale(1.05);
}
.subtitle-slider{
    font-size: 14px;
    color: #BADFEE;
    font-weight: 700;
}
/* escuelas  */
.cards3{
    display: flex;
    align-items: center; /* Asegura que las tarjetas estén alineadas */
}
.cards-static {
    flex-shrink: 0;
    width: 300px; /* Ajusta según el tamaño de tus cards */
    scroll-snap-align: start; /* Asegura que el desplazamiento se haga por tarjeta */
}
.static-card1 {
    max-width: 100%;
    background: var(--color--gradientecursosportema),
                url('../images/School1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    height: 11rem;
}
.static-card1:hover {
    transform: scale(1.05);
}
.static-card2 {
    max-width: 100%;
    height: cover;
    background-image:var(--color--gradientecursosportema),
     url('../images/School2.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.static-card2:hover {
    transform: scale(1.05);
}
.static-card3 {
    max-width: 100%;
    height: cover;
    background-image: var(--color--gradientecursosportema),
    url('../images/School3.jpg');
    transition: transform 0.3s ease;
    height: 11rem;
}
.static-card3:hover {
    transform: scale(1.05);
}