:root{

    --chiapas-verde:#006847;
    --chiapas-dorado:#B08D57;
    --chiapas-morado:#6A1B4D;

}

.text-chiapas-verde{

    color:var(--chiapas-verde);

}

.divider-chiapas{

    width:80px;
    height:4px;

    background:var(--chiapas-dorado);

    border-radius:2rem;

}

.espacio-card{

    position:relative;

    height:700px;

    overflow:hidden;

    border-radius:1rem;

    background-size:cover;

    background-position:center;

    transition:all .4s ease;

}

.espacio-card:hover{

    transform:translateY(-6px);

    box-shadow:0 1rem 2rem rgba(0,0,0,.20);

}

.espacio-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.30),
        rgba(0,0,0,.20)
    );

}

.espacio-frame{

    position:absolute;

    inset:20px;

    border:1px solid rgba(255,255,255,.25);

    z-index:2;

}

.espacio-content{

    position:absolute;

    inset:0;

    z-index:3;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:3rem;

}

.espacio-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(0,104,71,.85);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:2rem;

    border:3px solid rgba(255,255,255,.25);

}

.espacio-content h3{

    color:white;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.15rem;

    line-height:1.4;

    margin-bottom:2rem;

}

.espacio-content p{

    color:rgba(255,255,255,.90);

    text-transform:uppercase;

    letter-spacing:.12rem;

    line-height:1.8;

    max-width:500px;

    margin-bottom:2rem;

}

.btn-chiapas{

    background:var(--chiapas-verde);

    color:white;

    border:none;

    border-radius:.5rem;

    padding:.85rem 2rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08rem;

}

.btn-chiapas:hover{

    background:var(--chiapas-morado);

    color:white;

}

@media (max-width:992px){

    .espacio-card{

        height:550px;

    }

}

@media (max-width:576px){

    .espacio-card{

        height:450px;

    }

    .espacio-content{

        padding:2rem;

    }

    .espacio-content h3{

        font-size:1.5rem;

    }

}




.section-title::after{
    content:'';
    display:block;
    width:80px;
    height:4px;
    background:var(--chiapas-guinda);
    margin:15px auto 0;
    border-radius:2px;
}

.programa-card{
    position:relative;
    overflow:hidden;
    border-radius:.75rem;
    min-height:420px;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
    transition:.3s ease;
}

.programa-card:hover{
    transform:translateY(-6px);
    box-shadow:0 1rem 2rem rgba(0,0,0,.25);
}

.programa-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:transform .5s ease;
}

.programa-card:hover img{
    transform:scale(1.05);
}

.programa-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85) 10%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.15) 100%
    );
}

.programa-content{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2rem;
    color:#fff;
    z-index:2;
}

.programa-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--chiapas-verde);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin-bottom:1rem;
    box-shadow:0 .25rem .75rem rgba(0,0,0,.25);
}

.btn-chiapas{
    background:var(--chiapas-verde);
    color:#fff;
    border:none;
}

.btn-chiapas:hover{
    background:#00695c;
    color:#fff;
}

.programa-destacado{
    min-height:500px;
}

.programa-destacado img{
    height:500px;
}



:root{
    --chiapas-verde:#00897b;
    --chiapas-verde-dark:#00695c;
    --chiapas-guinda:#8d1b3d;
}

.archivistica-title::after{
    content:'';
    display:block;
    width:80px;
    height:4px;
    margin:15px auto 0;
    border-radius:2px;
    background:var(--chiapas-verde);
}

.archivistica-tabs{
    background:#f5f5f5;
    border-radius:50rem;
    padding:.35rem;
    display:inline-flex;
    gap:.5rem;
}

.archivistica-tabs .nav-link{
    border-radius:50rem;
    color:#495057;
    font-weight:600;
    padding:.75rem 1.5rem;
    border:0;
}

.archivistica-tabs .nav-link.active{
    background:var(--chiapas-verde);
    color:#fff;
    box-shadow:0 .25rem .75rem rgba(0,0,0,.15);
}

.archivistica-tabs .nav-link:hover{
    /* color:var(--chiapas-verde-dark); */
    background: #fff;
  color: var(--chiapas-verde) !important;
}

.archivo-listado{
    border-radius:.75rem;
    overflow:hidden;
    background:#fff;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
}

.archivo-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.25rem 1.5rem;
    text-decoration:none;
    color:#212529;
    transition:.2s;
}

.archivo-item:not(:last-child){
    border-bottom:1px solid #dee2e6;
}

.archivo-item:hover{
    background:#f8f9fa;
    color:var(--chiapas-verde);
}

.archivo-icono{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(0,137,123,.1);
    color:var(--chiapas-verde);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
}

.archivo-pdf{
    width:50px;
    height:50px;
    border-radius:.75rem;
    background:#fff;
    border:2px solid var(--chiapas-verde);
    color:var(--chiapas-verde);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
}

.archivo-item:hover .archivo-pdf{
    background:var(--chiapas-verde);
    color:#fff;
}

.archivo-titulo{
    font-size:1.1rem;
    font-weight:500;
}

/* ==========================
   Dropdown institucional
   ========================== */

.dropdown-menu-institucional{
    border: 0;
    border-radius: .75rem;
    padding: .5rem;
    min-width: 260px;

    background-color: #ffffff;

    box-shadow:
        0 .5rem 1rem rgba(0,0,0,.12);

    overflow: hidden;
}

/* Elementos del menú */
.dropdown-item-institucional{
    color: var(--chiapas-gris);

    border-radius: .5rem;

    padding: .75rem 1rem;

    font-weight: 500;

    transition: all .2s ease;
}

/* Hover */
.dropdown-item-institucional:hover,
.dropdown-item-institucional:focus{

    background-color: rgba(0,137,123,.10);

    color: var(--chiapas-verde);

}

/* Elemento activo */
.dropdown-item-institucional.active,
.dropdown-item-institucional:active{

    background-color: var(--chiapas-verde);

    color: #fff;
}

/* Ícono opcional */
.dropdown-item-institucional i{
    width: 20px;

    color: inherit;
}

.navbar .dropdown-toggle.active{
    color: var(--chiapas-verde);
    font-weight: 600;
}

.navbar .dropdown-toggle:hover{
    color: var(--chiapas-verde-dark);
}


/* ================================ */
/* =======================
   Menú principal
   ======================= */

.nav-link-custom{
    color:#343a40;
    font-weight:600;
    border-radius:1rem;
    transition:all .25s ease;
}

/* Hover de elementos normales */

.nav-link-custom:hover{
    color:var(--chiapas-guinda);
}


/* =======================
   Estilo Programas
   ======================= */

.menu-pill{

    padding:.85rem 1.4rem !important;

    border-radius:1rem;

    color:#343a40 !important;

    transition:all .25s ease;
}


/* Activo */

.menu-pill.active,
.menu-pill.show{

    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            var(--chiapas-guinda),
            var(--chiapas-guinda-dark)
        );

    box-shadow:
        0 .35rem .9rem rgba(193,0,90,.25);

}


/* Hover */

.menu-pill:hover{

    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            var(--chiapas-guinda),
            var(--chiapas-guinda-dark)
        );

    box-shadow:
        0 .35rem .9rem rgba(193,0,90,.20);

}


/* Flecha */

.menu-pill::after{

    margin-left:.5rem;
}


/* Flecha blanca cuando está activo */

.menu-pill.active::after,
.menu-pill.show::after{

    filter:brightness(0) invert(1);

}