/* Base */
* {
    font-family: var(--fuente-general);
}

body {
    background-color: var(--background-Body);
}

/* Header */
.header-section {
    background-color: var(--background-header-dudas);
    padding: 40px 0;
    color:  #FBFBFF;
    border-radius: 24px;
    margin-bottom: 90px;
}

.header-title {
    font-size: 57px;
    font-style: normal;
    font-weight: 700;
    line-height:64px; /* 112.281% */
    letter-spacing: 0.228px;
}

.header-subtitle {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
}

/* Search Section */
.search-section {
    margin-bottom: 50px;
}

.search-intro {
    color: var(--Color-texto-blackandwhite);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.text-primary {
    color: #5F9BF0;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.search-filter-section {
    position: relative;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.search-input-search {
    border-radius: 50px;
    height: 30px;
    padding: 8px 12px 8px 30px;
    border: var(--border-button-dudas);
    background-color: var(--background-input-search-dudas);
    width: 100%;
}
.search-input-search::placeholder {
    color: #BEBEBE; /* Color para el texto placeholder */
}
.search-input-search:focus {
    outline: none;
    border-color: var(--background-header-dudas) !important; /* Color del borde al hacer foco */
    box-shadow: none;
}

.search-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #1d6ce3;
    cursor: pointer;
}

.suggestions-panel {
    margin-top: 5px;
    background-color: var(--background-input-search-dudas);
    border-radius: 8px;
    box-shadow: var(--sombra-box-shadown);
    overflow: hidden;
    width: 100%;
}

.suggestion-header {
    padding: 10px 40px;
    background-color: var(--background-input-search-dudas);
    color: rgba(56, 56, 56, 0.50);
    font-size: 0.9rem;
}

.suggestion-items {
    padding: 0;
}

.suggestion-item {
    padding: 8px 40px;
    color: var(--Color-texto-blackandwhite);
    font-size: 0.9rem;
    background-color: var(--background-input-search-dudas);
    cursor: pointer;
}

.suggestion-item:hover {
    border-radius: 16px;
    background-color: var(--color-select-placeholder-dudas)
}

/* Section Titles */
.section-title-cardudas {
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.144px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

/* School Cards */
.schools-section {
    margin-bottom: 50px;
}

.school-cards {
    margin-bottom: 20px;
}

.school-card {
    border-radius: 25px;
    padding: 20px 24px;
    width: 240px;
    height: 124px;
    color: var(--color-texto-whiteforwhite);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
}

.school-card.green {
    background: linear-gradient(0deg, rgba(122, 153, 4, 0.80) 0%, rgba(122, 153, 4, 0.80) 100%), url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
}

.school-card.red {
    background: linear-gradient(0deg, rgba(205, 133, 115, 0.80) 0%, rgba(205, 133, 115, 0.80) 100%), url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
}

.school-card.blue {
   background: linear-gradient(0deg, rgba(17, 87, 133, 0.80) 0%, rgba(17, 87, 133, 0.80) 100%), url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
}

.school-card.gray {
   background: linear-gradient(0deg, rgba(67, 106, 110, 0.80) 0%, rgba(67, 106, 110, 0.80) 100%), url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
}

.card-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}

.card-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    opacity: 0.9;
}

.icon-circle {
    flex-shrink: 0;
}

/* Filter Section */
.section-title-filterdudas{
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.144px;
}
.filter-section {
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    align-items: center;
    background-color: var(--background-input-search-dudas);
    border-radius: 50px;
    padding: 8px 12px;
    margin-bottom: 15px;
    gap: 25px;
    box-shadow: var(--sombra-box-shadown)
}

.filter-by {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    color: var(--background-header-dudas);
    margin-right: 4px;
}

.circle-icon-filter {
    width: 25px;
    height: 25px;
    
}

.dropdown-container {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-grow: 1;
    justify-content: space-between;
}

.select-wrapper {
    position: relative;
    margin-right: 5px;
}

.styled-select {
    padding: 4px 24px 4px 10px;
    background-color: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    color: #374151;
    font-size: 14px;
    appearance: none;
    cursor: pointer;
    min-width: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M5.5 5.5L0.5 0.5H10.5L5.5 5.5Z' fill='%23214477'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.styled-select:focus {
    outline: none;
    border-color: #1d6ce3;
}

.filter-button {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    background-color: white;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    min-width: 90px;
    gap: 8px;
}

.circle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #1d6ce3;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.circle-btn.active {
    background-color: #1d6ce3;
}

.circle-btn.active path {
    stroke: white;
}

.search-row {
    position: relative;
}

.search-input-container {
    display: flex;
    background-color: var(--background-input-search-dudas);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: var(--sombra-box-shadown);
}

.courses-search {
    gap: 29px;
    padding: 8px 12px 8px 42px;
}

.search-input {
    flex-grow: 1;
    padding: 8px 12px 8px 30px;
    height: 30px;
    border: var(--border-button-dudas);
    font-family: Outfit;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
    outline: none;
    border-radius: 20px;
}
.with-icon-placeholder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M14.277 12.702L11.4103 9.83526C12.2108 8.80599 12.6988 7.50987 12.6988 6.09939C12.6988 2.72948 9.9693 0 6.59939 0C3.22948 0 0.5 2.72948 0.5 6.09939C0.5 9.4693 3.22948 12.1988 6.59939 12.1988C8.00987 12.1988 9.30599 11.7184 10.3353 10.9103L13.202 13.777C13.4993 14.0743 13.9796 14.0743 14.277 13.777C14.5743 13.4796 14.5743 12.9993 14.277 12.702ZM6.59939 10.6739C4.07577 10.6739 2.02485 8.62301 2.02485 6.09939C2.02485 3.57577 4.07577 1.52485 6.59939 1.52485C9.12301 1.52485 11.1739 3.57577 11.1739 6.09939C11.1739 7.08292 10.8537 7.99782 10.3276 8.745C10.0303 9.16433 9.66433 9.52267 9.25262 9.82001C8.50545 10.3537 7.59054 10.6663 6.60701 10.6663L6.59939 10.6739Z' fill='%23BBBAC8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position:right 15px center;
}
.search-input:focus {
    outline: none;
    border-color: var(--background-header-dudas) !important; /* Color del borde al hacer foco */
    box-shadow: none;
}
.search-button {
    display: flex;
    width: 98px;
    height: 30px;
    align-items: center;
    justify-content: center;
    /*padding: 8px 16px;*/	
    background-color: var(--background-header-dudas) !important;
    color: white !important;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
}
.td-mobile-filter-container{
    display: none;
}
.desktop-filters-wrapper{
    display: block;
}

/* Course Cards */
.courses-section {
    margin-bottom: 50px;
}

.course-cards {
    margin-bottom: 40px;
}

.row.course-cards {
    row-gap: 24px; /* Espacio vertical entre filas */
    padding: 0 107px;
}

.course-card {
    border-radius: 25px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 124px; /* Altura fija */
    width: 240px; /* Ancho fijo */
    display: flex;
    margin-bottom: 0;
}

/* Fondos específicos por columna */
.course-card.col-1 {
    background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), url(/Img/Img_card.jpg) lightgray 50% / cover no-repeat;
}

.course-card.col-2 {
    background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
}

.course-card.col-3 {
    background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), url(/Img/Img_card1.jpg) lightgray 50% / cover no-repeat;
}

.course-card.col-4 {
    background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), url(/Img/Img_card.jpg) lightgray 50% / cover no-repeat;
}

.card-content {
    position: relative;
    z-index: 1;
    padding: 20px 24px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.course-title {
    width: 117px;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; 
    margin-bottom: 0;
    margin-top: 0;
}

.course-info {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    font-size: 16px;
    font-style: normal;
    letter-spacing: 0.5px;
    margin-top: auto;
}

.icon-circle {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.card {
    transition: transform 0.3s;
    border-radius: 24px;
    overflow: hidden;
    }

.card-img {
    height: 124px;
    width: 100%;
    object-fit: cover;
    }
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-texto-whiteforwhite);
    background: rgba(30, 29, 26, 0.5);
}

.card-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 0;
}

.card-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #EEE;
}

.card-info svg {
    flex-shrink: 0;
}

/* Pagination con prefijo dudas */
.pagination-container-dudas {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination-dudas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

.prev-page-dudas,
.next-page-dudas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ajustado el tamaño */
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}

.prev-page-dudas:hover,
.next-page-dudas:hover {
    background-color: #E1ECF9;
}

.prev-page-dudas svg,
.next-page-dudas svg {
    width: 24px;
    height: 24px;
}

.page-number-dudas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ajustado el tamaño */
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #214477;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.page-number-dudas:hover {
    background-color: #E1ECF9;
}

.page-number-dudas.active {
    background-color: #E1ECF9;
    color: #214477;
}
@media (min-width: 768px) and  (max-width: 1024px){
.container {
    width: 100%;       /* Ocupa todo el ancho disponible */
    max-width: none;   /* No limitar el ancho máximo */
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;    /* Centrar el contenedor */
    box-sizing: border-box; /* Incluir padding en el cálculo del ancho */
}
.header-section {
    padding: 40px 0;
    margin-bottom: 88px;
}
.header-title{
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.18px;
}
.header-subtitle{
    width: 504px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
}
.search-section .row.align-items-start {
    display: flex;
    flex-direction: row;
}
    
.search-section .col-lg-7 {
    width: 59%;
    padding-right: 15px;
}    
.search-section .col-lg-5 {
    width: 40%;
    padding-left: 15px;
}
.section-title-cardudas{
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.144px;
    padding-bottom: 40px;
}
.school-card{
    overflow: visible
}
.section-title-filterdudas{
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.144px;
}
.filter-by{
    gap: 5px;
}
.filter-row{
    gap: 5px;
}
.dropdown-container{
    gap: 12px;
}
/* Configurar el grid para 3 columnas */
    .row.course-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
        row-gap: 24px;  
    }
    
    .row.course-cards .col-md-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .row.course-cards .col-md-3:nth-child(n+10) {
        display: none;
    }
    .course-card {
        width: 234px;
        height: 124px;
        margin: 0;
    }
    .course-card.col-1,
    .course-card.col-2,
    .course-card.col-3,
    .course-card.col-4 {
        background: none;
    }
    .row.course-cards .col-md-3:nth-child(3n+1) .course-card {
        background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), 
                    url(/Img/Img_card.jpg) lightgray 50% / cover no-repeat;
    }
    .row.course-cards .col-md-3:nth-child(3n+2) .course-card {
        background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), 
                    url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
    }
    .row.course-cards .col-md-3:nth-child(3n) .course-card {
        background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), 
                    url(/Img/Img_card1.jpg) lightgray 50% / cover no-repeat;
    }
    .pagination-container-dudas {
        margin-top: 52px;
    }
}
@media (min-width: 590px) and (max-width: 767px) {
.container {
    width: 100%;       /* Ocupa todo el ancho disponible */
    max-width: none;   /* No limitar el ancho máximo */
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;    /* Centrar el contenedor */
    box-sizing: border-box; /* Incluir padding en el cálculo del ancho */
}
.header-section{
    padding: 36px 0;
    margin-bottom: 49px;
}
.header-title{
    font-size: 0px;
    line-height: 0px;
}
.header-title::after {
    content: "¿Tienes preguntas?";
    display: block;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px; /* 122.222% */
    letter-spacing: 0.144px;
}

.header-subtitle{
    font-size: 0px;
    line-height: 0px; /* 133.333% */
}
.header-subtitle::after {
    content: "En este espacio nuestros evangelizadores\A resuelven las preguntas de nuestra comunidad.";
    display: block;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
    white-space: pre;
    }
.text-primary{
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; 
}
.search-intro{
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; 
}
.search-section .row.align-items-start {
    display: flex;
    flex-direction: row;
}
    
.search-section .col-lg-7 {
    width: 50%;
    padding-right: 15px;
}    
.search-section .col-lg-5 {
    width: 50%;
}
.section-title-cardudas{
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.144px;
    padding-bottom: 40px;
}
.school-card{
    overflow: visible
}
    .row.course-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        row-gap: 20px;  
        column-gap: 20px;
        margin-left: 0; /* Eliminar margen negativo de Bootstrap */
        margin-right: 0; /* Eliminar margen negativo de Bootstrap */
        width: 100%; /* Asegurar que ocupe todo el ancho disponible */
        padding: 0 40px; ;
    }
    .row.course-cards .col-md-3 {
        width: 100%;
        max-width: 100%;
        padding: 0; /* Eliminar padding de Bootstrap */
        margin: 0; /* Eliminar cualquier margen */
        flex: 0 0 100%;
    }
    .row.course-cards .col-md-3:nth-child(n+7) {
        display: none;
    }
    
    .course-card {
        width: 100%; /* Adaptarse al ancho disponible */
        height: 124px;
        margin: 0; /* Sin márgenes */
    }
    .course-card.col-1,
    .course-card.col-2,
    .course-card.col-3,
    .course-card.col-4 {
        background: none;
    }
    
    .row.course-cards .col-md-3:nth-child(2n+1) .course-card {
        background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), 
                    url(/Img/Img_card.jpg) lightgray 50% / cover no-repeat;
    }
    
    .row.course-cards .col-md-3:nth-child(2n) .course-card {
        background: linear-gradient(0deg, rgba(30, 29, 26, 0.50) 0%, rgba(30, 29, 26, 0.50) 100%), 
                    url(/Img/Lorem_lpsum.jpg) lightgray 50% / cover no-repeat;
    }
    .filter-row{
        display: none;
    }
     /* Contenedor principal para filtros móviles */
    .td-mobile-filters-wrapper {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    .td-mobile-filter-container {
        display: block;
        border-radius: 50px;
        box-shadow: var(--sombra-box-shadown);
        margin-bottom: 12px;
        overflow: hidden;
    }
    /* PRIMER CONTENEDOR: Filtrar por */
    .td-filter-header-container {
        background-color: var( --background-color-filter-movile-dudas); 
    }
    .td-filter-header-mobile {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        gap: 4px;
    }
    .td-filter-header-mobile .circle-icon-filter {
        width: 24px;
        height: 24px;
    }
    .td-filter-header-mobile span {
        color: var(--color-text-filter-movile-dudas);
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
        flex-grow: 1;
    }
    /* SEGUNDO CONTENEDOR: Opciones de filtro */
    .td-filter-options-container {
        background-color: var(--background-container-filter-dudas);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }
    
    .td-filter-options-container.visible {
        display: block;
        max-height: 2000px;
        border-radius: 20px;
        opacity: 1;
    }
    .td-filter-option-section {
        padding: 0;
    }
    
    .td-filter-option-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px 15px 30px;
        cursor: pointer;
    }
    
    .td-filter-option-header .title {
        color: var(--color-text-filter-subtitle-dudas);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
    }
    .selected-filter-option {
    color: #828282; /* Color azul como en la imagen */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: 0.5px;
    margin-left: 10px;
    }
    .td-filter-option-content {
        padding: 0 30px 15px;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    .td-filter-option-content:not(.hidden) {
    padding: 0 30px 15px;
    max-height: 500px; /* Ajustable según el contenido */
    }
    
    .courses-search {
    gap: 10px;
    padding: 8px 18px 8px 18px;
    }
    .td-filter-option-content.hidden {
        display: none;
    }
    
    /* Enlaces de las opciones */
    .td-filter-link {
        color: var(--color-text-filter-subtitle-dudas);
        text-decoration: none;
        font-size: 18px;
        margin: 5px 0;
        padding: 3px 0;
    }
    
    .td-filter-link.selected {
        color: var(--color-text-filter-movile-dudas);
    }
    
    /* Separador entre opciones */
    .td-filter-separator {
        height: 1px;
        background-color: #5F9BF0;
        margin: 0 20px;
    }
    
    .td-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    }
    .td-arrow-down svg {
        transform: rotate(0deg); /* Apunta hacia abajo */
        transition: transform 0.3s ease;
    }
    .td-filter-header-mobile.active .td-arrow-icon svg {
        transform: rotate(180deg);
        transform: 0.3s ease-in-out;;
    }
    .td-arrow-icon.rotated svg {
    transform: rotate(180deg);
}

.desktop-filters-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.desktop-filters-wrapper.visible {
    max-height: 500px; /* Ajustar según necesidad */
    opacity: 1;
}

}
@media (min-width: 320px) and (max-width: 590px) {
.container {
    width: 100%;       /* Ocupa todo el ancho disponible */
    max-width: none;   /* No limitar el ancho máximo */
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;    /* Centrar el contenedor */
    box-sizing: border-box; /* Incluir padding en el cálculo del ancho */
}

.header-section{
    padding: 36px 0;
    margin-bottom: 36px;
}
.header-title{
    font-size: 0px;
    line-height: 0px;
}
.header-title::after {
    content: "¿Tienes preguntas?";
    display: block;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: 0.144px;
}

.header-subtitle{
    font-size: 0px;
    line-height: 0px; /* 133.333% */
}
.header-subtitle::after {
    content: "En este espacio nuestros\A evangelizadores resuelven las\Apreguntas de nuestra comunidad.";
    display: block;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
    white-space: pre;
    }
.text-primary{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
}
.search-intro{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.search-input-search text{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.5px;
}
.row.course-cards {
    padding: 0 20px; /* Ajustar el padding para móviles */
}
.course-card{
    width: auto;
}

    .filter-row{
        display: none;
    }
     /* Contenedor principal para filtros móviles */
    .td-mobile-filters-wrapper {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    .td-mobile-filter-container {
        display: block;
        border-radius: 50px;
        box-shadow: var(--sombra-box-shadown);
        margin-bottom: 12px;
        overflow: hidden;
    }
    /* PRIMER CONTENEDOR: Filtrar por */
    .td-filter-header-container {
        background-color: var( --background-color-filter-movile-dudas); 
    }
    .td-filter-header-mobile {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        gap: 4px;
    }
    .td-filter-header-mobile .circle-icon-filter {
        width: 24px;
        height: 24px;
    }
    .td-filter-header-mobile span {
        color: var(--color-text-filter-movile-dudas);
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
        flex-grow: 1;
    }
    /* SEGUNDO CONTENEDOR: Opciones de filtro */
    .td-filter-options-container {
        background-color: var(--background-container-filter-dudas);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }
    
    .td-filter-options-container.visible {
        display: block;
        max-height: 2000px;
        border-radius: 20px;
        opacity: 1;
    }
    .td-filter-option-section {
        padding: 0;
    }
    
    .td-filter-option-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px 15px 30px;
        cursor: pointer;
    }
    
    .td-filter-option-header .title {
        color: var(--color-text-filter-subtitle-dudas);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
    }
    .selected-filter-option {
    color: #828282; /* Color azul como en la imagen */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: 0.5px;
    margin-left: 10px;
    }
    .td-filter-option-content {
        padding: 0 30px 15px;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    .td-filter-option-content:not(.hidden) {
    padding: 0 30px 15px;
    max-height: 500px; /* Ajustable según el contenido */
    }
    
    .courses-search {
    gap: 10px;
    padding: 8px 18px 8px 18px;
    }
    .td-filter-option-content.hidden {
        display: none;
    }
    
    /* Enlaces de las opciones */
    .td-filter-link {
        color: var(--color-text-filter-subtitle-dudas);
        text-decoration: none;
        font-size: 18px;
        margin: 5px 0;
        padding: 3px 0;
    }
    
    .td-filter-link.selected {
        color: var(--color-text-filter-movile-dudas);
    }
    
    /* Separador entre opciones */
    .td-filter-separator {
        height: 1px;
        background-color: #5F9BF0;
        margin: 0 20px;
    }
    
    .td-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    }
    .td-arrow-down svg {
        transform: rotate(0deg); /* Apunta hacia abajo */
        transition: transform 0.3s ease;
    }
    .td-filter-header-mobile.active .td-arrow-icon svg {
        transform: rotate(180deg);
        transform: 0.3s ease-in-out;;
    }
    .td-arrow-icon.rotated svg {
    transform: rotate(180deg);
}

.desktop-filters-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.desktop-filters-wrapper.visible {
    max-height: 500px; /* Ajustar según necesidad */
    opacity: 1;
}
}

@media screen and (min-width: 590px) and (max-width: 767px) {
    .schools-section {
        overflow: hidden;
    }

    .container {
        max-width: none;
    }

    .school-cards {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        margin: 0;
    }

    .col-md-3 {
        flex: 0 0 240px;
        max-width: 240px;
        width: 240px;
        padding: 0;
        transition: transform 0.5s ease;
    }

    /* Ajustar el contenedor para mostrar 2.5 cards */
    .row.school-cards {
        width: calc(240px * 2.5 + 20px * 2);
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    /* Animación para el movimiento infinito */
    .school-cards.animate {
        transition: transform 0.5s ease-in-out;
    }
}