/* TITULO */
.custom-underline
{
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}

.custom-underline::after
{
    content: "";
    position: absolute;
    left: -25px;
    right: -25px;
    bottom: 0;
    height: 3px;
    background-color: #fcaa52;
}

/* AUTORIDADES */
.box-content
{
    cursor: pointer;
    background: #f2f2f2;
    color: #000;
    border-radius: .5rem;
    border: 2px solid transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    transition: all .30s ease;
}

.box-content:hover
{
    background-color: #15395A;
    color: #fff;
    transform: translateY(-6px);
    border-color: #fcaa52;
    box-shadow: 0 10px 25px rgba(0,0,0,.22), 0 0 12px rgba(252,170,82,.30);
    cursor: pointer;
}

.box-content a
{
    display: block;
    position: relative;
    overflow: hidden;
}

.box-content a::before
{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #fcaa52;
    transform: scaleX(0);
    transition: transform .30s ease;
    z-index: 2;
}

.box-content:hover a::before
{
    transform: scaleX(1);
}

.box-content img
{
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: top center;
    border-radius: .5rem .5rem 0 0;
    transition: transform .35s ease, filter .35s ease;
}

.box-content:hover img
{
    transform: scale(1.03);
    filter: brightness(.92);
}

.box-footer
{
    padding: .75rem .75rem .85rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 92px;
}

.box-footer h5
{
    width: 100%;
    min-height: 36px;
    margin: 0 0 .25rem 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.30;
    color: #15395A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .30s ease;
}

.box-content:hover .box-footer h5
{
    color: #fcaa52;
    transform: translateY(-2px);
}

.box-footer p
{
    width: 100%;
    min-height: 34px;
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.30;
    color: #444;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: color .30s ease;
}

.box-content:hover .box-footer p
{
    color: #fff;
}

/* GALERIA DIRECTORES */
.galeria-directores-section
{
    margin-top: 3rem;
}

.directores-filtros
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.directores-filter-btn
{
    border: 2px solid #15395A;
    background: #fff;
    color: #15395A;
    padding: .55rem 1.35rem;
    border-radius: 50px;
    font-size: .80rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .30s ease;
}

.directores-filter-btn:hover,
.directores-filter-btn.active
{
    background: #15395A;
    color: #fcaa52;
    border-color: #fcaa52;
}

.director-item
{
    margin-bottom: 1.5rem;
}

.director-card
{
    height: 100%;
    background: #fff;
    border: 2px solid transparent;
    border-radius: .5rem;
    overflow: hidden;
    text-align: center;
    transition: all .30s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.director-card:hover
{
    transform: translateY(-5px);
    border-color: #fcaa52;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    cursor: pointer;
}

.director-card-img
{
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
}

.director-card-img::after
{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #fcaa52;
    transform: scaleX(0);
    transition: transform .30s ease;
}

.director-card:hover .director-card-img::after
{
    transform: scaleX(1);
}

.director-card-img img
{
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .35s ease, filter .35s ease;
}

.director-card:hover .director-card-img img
{
    transform: scale(1.04);
    filter: brightness(.92);
}

.director-card-body
{
    padding: .80rem .65rem;
    min-height: 88px;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background .30s ease;
}

.director-card:hover .director-card-body
{
    background: #15395A;
}

.director-card-body h5
{
    margin: 0;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.30;
    color: #15395A;
    transition: color .30s ease;
}

.director-periodo
{
    display: block;
    margin-top: .35rem;
    font-size: .70rem;
    color: #666;
    line-height: 1.25;
}

.director-card:hover .director-card-body h5
{
    color: #fcaa52;
}

.director-card:hover .director-periodo
{
    color: #fff;
}

/* PAGINACION */
.directores-pagination
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.directores-page-btn
{
    min-width: 38px;
    height: 38px;
    border: 1px solid #15395A;
    background: #fff;
    color: #15395A;
    border-radius: .35rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

.directores-page-btn:hover,
.directores-page-btn.active
{
    background: #15395A;
    color: #fcaa52;
    border-color: #fcaa52;
}

.directores-page-btn:disabled
{
    opacity: .45;
    cursor: not-allowed;
}

/* RESPONSIVE */
@media (max-width: 991px)
{
    .box-content img { height: 350px; }
    .director-card-img img { height: 220px; }
}

@media (max-width: 767px)
{
    .box-content img { height: 320px; }

    .box-footer
    {
        min-height: auto;
        padding: .75rem;
    }

    .box-footer h5,
    .box-footer p
    {
        min-height: auto;
    }

    .directores-filter-btn
    {
        width: 100%;
        max-width: 260px;
    }

    .director-card-img img
    {
        height: 260px;
    }
}







/* ==================================================
   PAGINADOR GALERÍA DE DIRECTORES
================================================== */

.directores-pagination,
#directoresPagination,
#pagination-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 14px 18px;
    background: #f8f9fa;
    border: 1px solid rgba(21, 57, 90, .12);
    border-radius: 50px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Botones generados por tu JS */
.directores-page-btn,
#pagination-container .btn,
#directoresPagination .btn
{
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(21, 57, 90, .25) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #15395A !important;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: all .25s ease;
}

/* Hover */
.directores-page-btn:hover,
#pagination-container .btn:hover,
#directoresPagination .btn:hover
{
    background: #15395A !important;
    border-color: #15395A !important;
    color: #fcaa52 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(21,57,90,.25) !important;
}

/* Página activa */
.directores-page-btn.active,
#pagination-container .btn-primary,
#directoresPagination .btn-primary
{
    background: #15395A !important;
    border-color: #fcaa52 !important;
    color: #fcaa52 !important;
    box-shadow:
        0 0 0 3px rgba(252,170,82,.25),
        0 8px 18px rgba(21,57,90,.28) !important;
}

/* Flechas */
#pagination-container .btn i,
#directoresPagination .btn i
{
    font-size: .85rem;
}

/* Deshabilitados */
.directores-page-btn:disabled,
#pagination-container .btn:disabled,
#directoresPagination .btn:disabled
{
    background: #eef1f4 !important;
    border-color: #d7dce1 !important;
    color: #9aa3ad !important;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 767px)
{
    .directores-pagination,
    #directoresPagination,
    #pagination-container
    {
        border-radius: 18px;
        padding: 12px;
        gap: 6px;
    }

    .directores-page-btn,
    #pagination-container .btn,
    #directoresPagination .btn
    {
        min-width: 34px;
        height: 34px;
        font-size: .78rem;
        padding: 0 9px;
    }
}