/* =========================================================
ESTILOS COMPLEMENTARIOS
========================================================= */

.card-hover{
    transition: all .25s ease;
}

.card-hover:hover{
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.08)!important;
}

.icon-circle{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}

.section-title .title-line{
    width:80px;
    height:4px;
    border-radius:10px;
    background: linear-gradient(90deg,#c62828,#e53935);
    margin-top:10px;
}

.pdf-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    background:#fff1f1;
    color:#d32f2f;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
}

.accordion-button{
    padding:1rem 1.25rem;
    background:#fff;
}

.accordion-button:not(.collapsed){
    background:#fff5f5;
    color:#b71c1c;
    box-shadow:none;
}

.accordion-button:focus{
    box-shadow:none;
    border-color:transparent;
}

.text-justify{
    text-align:justify;
}


            .section-divider {
              border-color: rgba(0, 0, 0, 0.08);
              margin: 3rem 0 2rem;
            }

            /* .section-title {
              color: var(--chiapas-oscuro);
              font-weight: 700;
              margin-bottom: 1.5rem;
              position: relative;
              padding-left: 1rem;
            }

            .section-title::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0.2rem;
              width: 6px;
              height: 80%;
              border-radius: 20px;
              background: linear-gradient(180deg,
                  var(--chiapas-verde),
                  var(--chiapas-magenta));
            } */

            .document-list {
              list-style: none;
              padding-left: 0;
              margin-bottom: 2rem;
            }

            .document-item {
              background: var(--chiapas-blanco);
              border: 1px solid rgba(0, 0, 0, 0.06);
              border-left: 5px solid var(--chiapas-verde);
              border-radius: var(--radius);
              padding: 1rem 1.25rem;
              margin-bottom: 1rem;
              transition: var(--transition);
              box-shadow: var(--shadow);
            }

            .document-item:hover {
              transform: translateY(-3px);
              box-shadow: var(--shadow-hover);
              border-left-color: var(--chiapas-magenta);
            }

            .document-link {
              text-decoration: none;
              color: var(--chiapas-texto);
              font-weight: 600;
              transition: var(--transition);
            }

            .document-link:hover {
              color: var(--chiapas-magenta);
            }

            .document-meta {
              font-size: 0.85rem;
              color: #666;
            }

            .icon-doc {
              color: var(--chiapas-rojo);
              font-size: 1.3rem;
            }

            .icon-link {
              color: var(--chiapas-verde);
              font-size: 1.2rem;
            }

            .badge-link {
              background: var(--chiapas-magenta);
              color: var(--chiapas-blanco);
              border-radius: 50px;
              padding: 0.55rem 1.2rem;
              text-decoration: none;
              font-weight: 600;
              transition: var(--transition);
              display: inline-block;
            }

            .badge-link:hover {
              background: var(--chiapas-verde);
              color: var(--chiapas-blanco);
              transform: translateY(-2px);
            }
    

          
    .sidebar-card {
      background: var(--chiapas-blanco);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2rem;
      transition: var(--transition);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .sidebar-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }

    .sidebar-image {
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1.5rem;
    }

    .sidebar-image img {
      width: 100%;
      object-fit: cover;
    }

    .sidebar-title {
      color: var(--chiapas-oscuro);
      font-weight: 700;
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .section-divider {
      border-color: rgba(0, 0, 0, 0.08);
      margin: 2rem 0;
    }

    .section-title-conocenos {
      color: var(--chiapas-oscuro);
      font-weight: 700;
      margin-bottom: 1.25rem;
      position: relative;
      padding-left: 1rem;
      font-size: 1.1rem;
    }

    .section-title-conocenos::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.2rem;
      width: 5px;
      height: 80%;
      border-radius: 50px;
      background: linear-gradient(180deg,
          var(--chiapas-verde),
          var(--chiapas-magenta));
    }

    .info-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
      color: var(--chiapas-texto);
    }

    .info-icon {
      color: var(--chiapas-magenta);
      font-size: 1.1rem;
      margin-top: 0.2rem;
    }

    .info-link {
      color: var(--chiapas-texto);
      text-decoration: none;
      transition: var(--transition);
    }

    .info-link:hover {
      color: var(--chiapas-magenta);
    }

    .map-container {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .map-container iframe {
      width: 100%;
      min-height: 300px;
      border: 0;
    }
.social-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.social-link {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 1rem;

  padding: 1rem 1.25rem;

  background: var(--chiapas-claro);

  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;

  color: var(--chiapas-texto);
  text-decoration: none;

  font-weight: 500;

  transition: var(--transition);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);

  overflow: hidden;
}

.social-link:hover {
  background: linear-gradient(
    135deg,
    var(--chiapas-magenta),
    var(--chiapas-rojo)
  );

  color: var(--chiapas-blanco);

  transform: translateY(-3px);

  box-shadow: 0 14px 28px rgba(201, 1, 102, 0.25);
}

.social-icon {
  width: 48px;
  height: 48px;

  min-width: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(201, 1, 102, 0.10);

  color: var(--chiapas-magenta);

  font-size: 1.2rem;

  transition: var(--transition);
}

.social-link:hover .social-icon {
  background: rgba(255,255,255,0.15);
  color: var(--chiapas-blanco);

  transform: scale(1.08);
}

.social-link .social-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--chiapas-magenta),
    var(--chiapas-rojo)
  );

  color: #fff !important;

  font-size: 1.4rem;

  flex-shrink: 0;

  transition: var(--transition);
}

.social-content {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.social-title {
  font-weight: 600;
  line-height: 1.2;
}

.social-user {
  font-weight: 700;
  font-size: 0.92rem;

  opacity: .85;
}

.social-link:hover .social-user,
.social-link:hover .social-title {
  color: var(--chiapas-blanco);
}
  

     
            .about-card {
              background: var(--chiapas-blanco);
              border-radius: var(--radius);
              padding: 2rem;
              box-shadow: var(--shadow);
              border: 1px solid rgba(0, 0, 0, 0.05);
              transition: var(--transition);
              position: relative;
              overflow: hidden;
            }

            .about-card::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 6px;
              background: linear-gradient(90deg,
                  var(--chiapas-verde),
                  var(--chiapas-magenta),
                  var(--chiapas-rojo));
            }

            .about-card:hover {
              transform: translateY(-4px);
              box-shadow: var(--shadow-hover);
            }

            .about-title {
              color: var(--chiapas-oscuro);
              font-weight: 800;
              margin-bottom: 1.25rem;
              line-height: 1.3;
            }

            .about-text {
              color: var(--chiapas-texto);
              line-height: 1.9;
              text-align: justify;
              margin-bottom: 0;
              font-size: 1rem;
            }

            .about-highlight {
              color: var(--chiapas-magenta);
              font-weight: 700;
            }
          
            .quick-card {
              border: 0;
              border-radius: var(--radius);
              overflow: hidden;
              background: var(--chiapas-blanco);
              box-shadow: var(--shadow);
              transition: var(--transition);
              position: relative;
            }

            .quick-card::before {
              content: "";
              position: absolute;
              inset: 0;
              border-radius: var(--radius);
              padding: 1px;
              background: linear-gradient(135deg,
                  transparent,
                  rgba(201, 1, 102, 0.15),
                  transparent);
              -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
              -webkit-mask-composite: xor;
              mask-composite: exclude;
            }

            .quick-card:hover {
              transform: translateY(-6px);
              box-shadow: var(--shadow-hover);
            }

            .quick-card .card-body {
              padding: 1.5rem;
            }

            .icon-circle-chiapas {
              width: 64px;
              height: 64px;
              min-width: 64px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: linear-gradient(135deg,
                  var(--chiapas-magenta),
                  var(--chiapas-rojo));
              color: var(--chiapas-blanco);
              font-size: 1.5rem;
              box-shadow: 0 10px 24px rgba(201, 1, 102, 0.25);
              transition: var(--transition);
            }
             .icon-circle-directorio {
              width: 64px;
              height: 64px;
              min-width: 64px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: linear-gradient(135deg,
                  var(--chiapas-verde),
                  var(--chiapas-magenta));
              color: var(--chiapas-blanco);
              font-size: 1.5rem;
              box-shadow: 0 10px 24px rgba(201, 1, 102, 0.25);
              transition: var(--transition);
            }

            .quick-card:hover .icon-circle-chiapas {
              transform: scale(1.08) rotate(-4deg);
            }

            .quick-card-title {
              color: var(--chiapas-oscuro);
              font-weight: 700;
              margin-bottom: 0.35rem;
            }

            .quick-card-text {
              color: #6c757d;
              font-size: 0.92rem;
            }

            .quick-card:hover .quick-card-title {
              color: var(--chiapas-magenta);
            }
          

            /* =========================
   ACCORDION CHIAPAS
========================= */

.accordion-chiapas{
  --bs-accordion-border-width:0;
  --bs-accordion-btn-focus-box-shadow:none;
}

/* ITEM */

.custom-accordion-item{
  border:none;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow);
  background:var(--chiapas-blanco);
  transition:var(--transition);
}

.custom-accordion-item:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}

/* HEADER */

.custom-accordion-button{
  background:linear-gradient(
    135deg,
    var(--chiapas-magenta),
    #a50052
  );
  color:var(--chiapas-blanco);
  font-weight:700;
  font-size:1rem;
  padding:1.1rem 1.25rem;
  border:none;
  box-shadow:none;
}

.custom-accordion-button:not(.collapsed){
  background:linear-gradient(
    135deg,
    var(--chiapas-magenta),
    #920049
  );
  color:var(--chiapas-blanco);
  box-shadow:none;
}

/* ICONO DEFAULT BS */

.custom-accordion-button::after{
  filter:brightness(0) invert(1);
}

/* ICONOS */

.custom-accordion-button i{
  font-size:1.1rem;
  color:var(--chiapas-blanco);
}

/* BODY */

.custom-accordion-body{
  background:var(--chiapas-blanco);
  padding:1.5rem;
}

/* DESCRIPCION */

.accordion-description{
  color:var(--chiapas-texto);
  line-height:1.8;
  margin-bottom:1.25rem;
  text-align:justify;
}

/* LISTA */

.custom-list-group{
  border-radius:0;
}

.custom-list-item{
  border-left:4px solid var(--chiapas-magenta);
  border-right:none;
  border-top:none;
  border-bottom:1px solid #eee;
  padding:1rem 1rem 1rem 1.25rem;
  transition:var(--transition);
  background:#fff;
}

.custom-list-item:hover{
  background:rgba(201,1,102,.04);
}

/* INSTITUCION */

.institution-name{
  display:block;
  margin-top:.35rem;
  color:var(--chiapas-magenta);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* BLOQUE INFORMATIVO */

.comision-info{
  background:linear-gradient(
    135deg,
    rgba(0,152,135,.08),
    rgba(201,1,102,.06)
  );
  border-left:5px solid var(--chiapas-verde);
  border-radius:var(--radius);
  padding:1.5rem;
  margin:2rem 0;
}

.comision-title{
  color:var(--chiapas-oscuro);
  font-weight:800;
  margin-bottom:.75rem;
}

.comision-description{
  margin:0;
  color:#555;
  line-height:1.8;
}

/* RESPONSIVE */

@media (max-width:768px){

  .custom-accordion-button{
    font-size:.92rem;
    padding:1rem;
  }

  .custom-accordion-body{
    padding:1.15rem;
  }

}