:root{
    --color-fondo :      #f3f5f8;
    --color-primario :   #0092dd;
    --color-secundario : #005da4;
    --color-theme1 :     #1f1f1f;
    --color-theme2 :     #6a6e83;
    --color-theme3 :     #a8b1ce;
    --color-theme4 :     #cddeff;
    --color-theme5 :     #f2f5ff;
    --color-theme6 :     #f8f9fd;
    --color-theme7 :     #ffffff;
    --color-theme8 :     #313131;
    --color-theme9 :     #434343;
    --color-theme10:     #5b5a5a;
    --color-theme11:     #d5d5d5;
    --color-theme12:     #151515;
    --color-theme13:     #acadb4;
    --color-theme14:     #e8ecf2;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*===================================================
                    Start Generales
===================================================*/

*,
*::after,
*::before{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body{
    font-family: 'Poppins', sans-serif;
    text-align: left;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.428;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: var(--color-fondo);
}

a, a:link, a:visited, a:active, a:hover, a:focus, button{
    text-decoration: none;
    transition: 0.3s ease;
}
section{
    padding: 5% 0;
}

/* Botones */
.btn-primario{
    color: var(--color-theme7);
    background: var(--color-primario);
}
.btn-primario:hover{
    background: var(--color-secundario);
}

.iframe-transparencia{
    padding: 10px;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    border: none;
    background: var(--color-theme7);
    border: 1px solid var(--color-theme13);
}



/* Formulario */

form{
    padding: 20px;
    background: var(--color-theme7);
    border: 1px solid var(--color-theme14);
}
label{
    text-align: left;
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-theme2)
}
input, select,textarea, button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;


    display: block;
    width: 100%;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    height: 45px;
    margin-bottom: 20px;
    margin-top: 5px;
    border: none;
    color: var(--color-theme2);
    background-color: var(--color-theme7);
    border: 1px solid var(--color-theme14);
    padding-left: 15px;
    padding-right: 15px;
}
.boton{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
textarea{
    padding: 14px;
    min-height: 100px;
    min-width: 100%;
}




button,
.modal-button{
    cursor: pointer;
    display: inline-block;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    color: var(--color-texto1);
    background-color: var(--color-principal);
}


.contenedor{
    width: 100%;
    margin: auto;
    padding: 0 40px;
    max-width: 1440px;
}
main,
.main{
    min-height: calc(100vh - 606px);
}
/*===================================================
                    End Generales
===================================================*/





/*===================================================
                   Start header_top
===================================================*/
.header_top{
    background: var(--color-theme6);
    border-bottom: 1px solid var(--color-theme5);
}
.header_top .contenido{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header_top ul > li{
    position: relative;
    display: inline-block;
    padding: 0 10px 0 12px;
}
.header_top ul > li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -3px;
    height: 7px;
    width: 1px;
    background: var(--color-theme4);
}
.header_top ul > li:first-child:before{
    display: none;
}
.header_top ul > li a {
    font-size: 11px;
    line-height: 36px;/*Tamaño*/
    font-weight: 500;
    color: var(--color-theme2);
}
.header_top ul > li a::before {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    left: 1.5px;
    bottom: 0px;
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.header_top ul > li a:hover,
.header_top ul > li.seleccionado a{
    color: var(--color-primario) !important;
}
.header_top ul > li a:hover::before,
.header_top ul > li.seleccionado a::before{
    background: var(--color-primario);
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

/* Tablet */
@media(max-width:991px){
    .header_top .contenido{
      justify-content: center;
    }
    .header_top ul:nth-child(2) > li:first-child:before{
      display: block;
    }
}
/* Mobil */
@media(max-width:800px){
    .header_top ul:nth-child(1),
    .header_top ul:nth-child(2) > li:first-child:before{
        display: none;
    }
}
/*===================================================
                    End header_top
===================================================*/



/*===================================================
                   Start header_body
===================================================*/
.header_body{
    background: var(--color-theme7);
}
.header_body .contenido{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100px;
}

/* Logo */
.header_body .logo{
    display: flex;
    align-items: center;
}
.header_body .logo img{
    width: auto;
    height: 60px;
}

/* Menu */
.header_body .menu > ul{
    display: flex;
    align-items: center;
}
.header_body .menu > ul > li{
    position: relative;
}
.header_body .menu > ul > li > a{
    position: relative;
    padding: 0 10px;
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 100px;
    color: var(--color-theme2);
}
.header_body .menu > ul > li > a > i{
    margin-left: 6px;
    font-size: 12px;
    color: var(--color-theme3);
    transition: 0.3s ease;
}
.header_body .menu > ul > li > a::before{
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    left: 0;
    bottom: 0;
    width: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.header_body .menu > ul > li:hover > a
.header_body .menu > ul > li.seleccionado > a{
    color: var(--color-theme1);
}
.header_body .menu > ul > li:hover > a::before,
.header_body .menu > ul > li.seleccionado > a::before{
    background: var(--color-primario);
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

/* Sub Meenu */
.header_body .menu > ul > li:hover ul{
    display: block;
}
.header_body .menu > ul ul{
    position: absolute;
    z-index: 2;
    display: none;
    padding: 20px;
    width: max-content;
    background: var(--color-theme7);
    border: 1px solid var(--color-theme5);
}
.header_body .menu > ul ul > li > a{
    position: relative;
    padding: 10px;
    padding-left: 25px;
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-theme2);
    border: 1px solid transparent;
}
.header_body .menu > ul ul > li > a::before{
    position: absolute;
    display: block;
    content: "";
    height: 5px;
    width: 5px;
    left: 10px;
    top: 16px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: var(--color-theme3);
} 
.header_body .menu > ul ul > li > a:hover{
    color: var(--color-theme1);
    background: var(--color-theme6);
    border-radius: 6px;
    border: 1px solid var(--color-theme4);
}
.header_body .menu > ul ul > li > a:hover::before{
    background: var(--color-primario);
}


/* Redes Sociales */
.header_body .redes_sociales ul{
    display: flex;
    align-items: center;
}
.header_body .redes_sociales a,
.header_body .menu_toggle{
    margin-left: 5px;
    display: block;
    width: 36px;
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    color: var(--color-theme2);
    background-color: var(--color-theme6);
    border-radius: 10%;
    transition: all .2s ease-in-out;
}
.header_body .redes_sociales a:hover,
.header_body .menu_toggle:hover{
    cursor: pointer;
    color: var(--color-theme7);
    background-color: var(--color-primario);
}

.header_body .menu_toggle{
    display: none;
}



/* Responsive */
@media(max-width:1129px){
    .header_body{
        border-bottom: 1px solid var(--color-theme5);
    }
    .header_body .contenedor{
        padding: 0;
    }
    .header_body .contenido{
        position: relative;
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
    }

    /* Logo */
    .header_body .logo{
        padding: 0 40px;
        width: 100%;
        display: flex;
        align-items: center;
        height: 100px;
    }
    .header_body .logo img{
        width: auto;
        height: 60px;
    }
    /* Redes Sociales y menu Toggle*/
    .header_body .redes_sociales ul,
    .header_body .menu_toggle{
        position: absolute;
        top: 30px;
    }
    .header_body .menu_toggle{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        right: 40px;
        color: var(--color-theme5);
        background: var(--color-theme1);
    }
    .header_body .menu_toggle:hover{
        color: var(--color-theme7);
        background: var(--color-primario);
    }
    .header_body .redes_sociales ul{
        right: 81px;
    }

    /* Menu */
    .header_body .menu{
        width: 100%;
        display: block;
    }
    .header_body .menu > ul{
        display: none;
        width: 100%;
        flex-direction: column;
        background: var(--color-theme7);
    }
    .header_body .menu > ul > li{
        display: block;
        width: 100%;
    }
    .header_body .menu > ul > li:hover > a{
        color: var(--color-primario);
    }
    .header_body .menu > ul > li:hover > a > i{
        color: var(--color-theme7);
        background: var(--color-primario);
    }
    .header_body .menu > ul > li > a{
        padding: 0 40px;
        line-height: 50px;
        border-top: 1px solid var(--color-theme5);
        background: var(--color-theme6);
    }
    .header_body .menu > ul  > li > a > i{
        padding: 1px;
        position: absolute;
        top: 16px;
        right: 40px;
        background : var(--color-theme7);
        border: 1px solid var(--color-theme5);
    }
    .header_body .menu > ul > li > a::before{
        display: none;
    }
    /* Sub Menu*/
    .header_body .menu ul > li:hover > ul{
        display: none;
    }
    .header_body .menu > ul ul{
        padding: 20px 40px;
        position: relative;
        width: 100%;
        border: none;
        border-top: 1px solid var(--color-theme5);
    }
}

@media(max-width:590px){
    /* Ocultar Redes Sociales */
    .header_body .redes_sociales{
        display: none;
    }
}
/*===================================================
                    End header_body
===================================================*/






/*===================================================
                    Start Breadcrumb
===================================================*/
.breadcrumb{
    background: var(--color-theme7);
    border-top: 1px solid var(--color-theme14);
    border-bottom: 1px solid var(--color-theme14);
}
.breadcrumb .contenedor{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .breadcrumb li{
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    position: relative;
    color: var(--color-theme13);
  }
  .breadcrumb li::before{
    position: absolute;
    top: 19px;
    left: -3px;
    display: block;
    content: ">";
  }
  .breadcrumb li:first-child:before{
    display: none;
  }
  .breadcrumb li:first-child{
    padding-left: 0;
  }
  .breadcrumb li a{
    color: var(--color-theme2);
  }
  .breadcrumb li a:hover{
    color: var(--color-primario);
  }
  .breadcrumb li a > i{
    font-size: 12px;
    margin-right: 5px;
  }
  
/*===================================================
                     End Breadcrumb
===================================================*/






/*===================================================
                       Start Footer
===================================================*/
.footer{
    font-size: 13px;
    font-weight: 500;
    color: var(--color-theme8);
    background: var(--color-theme1);
    border-top: 2px solid var(--color-primario);
}
.footer .contenido{
    padding-bottom: 40px;
}

.footer ul > span{
    margin-top: 40px;
    margin-bottom: 30px;
    display: block;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-theme11);
}
.footer ul > li > a{
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 14px;
    font-weight: 500;
    color: var(--color-theme10);
}
.footer ul > li > a > i{
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 14px;
    color: var(--color-theme1);
    background: var(--color-theme9);
    border-radius: 4px;
    transition: 0.3s ease;
}

.footer ul > li > a:hover{
    color: var(--color-theme11);
}
.footer ul > li > a:hover > i{
    color: var(--color-primario);
}

.footer .footer_creditos{
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-theme10);
    background: var(--color-theme12);
    border-top: 1px solid rgba(255,255,255, 0.1);
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.4);
}
.footer .footer_creditos a{
    color: var(--color-theme11);
}
.footer .footer_creditos a:hover{
    color: var(--color-theme7);
}
/*===================================================
                        End Footer
===================================================*/






/*===================================================
                   Start Section Titulo
===================================================*/
.section_titulo{
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.section_titulo .pagina{
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    color: var(--color-primario);
}
.section_titulo .pagina::after{
    position: relative;
    display: block;
    content: "";
    margin: auto;
    margin-top: 10px;
    height: 2px;
    width: 30px;
    background: var(--color-primario);
}
.section_titulo .titulo{
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    color: var(--color-theme1);
}
.section_titulo .titulo > span{
    display: block;
    font-weight: 700;
}

@media(max-width:767px){
    .section_titulo{
        margin-bottom: 40px;
    }
    .section_titulo .titulo{
        font-size: 20px;
        line-height: 24px;
    }
}

/*===================================================
                   End Section Titulo
===================================================*/


.pagina_imagen{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagina_imagen > img{
    display: block;
    width: 100%;
    height: auto;
}










/*===================================================
                      Start Contacto
===================================================*/
/*.contacto{
    background-image: url(./assets/img/fondo1.png);
    background-position: center center;
    background-size:auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}*/
.contacto_info{
    display: flex;
    flex-direction: column;
}
.contacto_info li{
    display: flex;
    margin-top: 20PX;
}
.contacto_info li:first-child{
    margin-top: 0;
}
.contacto_info li i{
    margin-right: 10px;
    display: block;
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    height: 50px;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    color: var(--color-primario);
    background-color: var(--color-theme7);
    border: 1px solid var(--color-theme14);
    border-radius: 10%;
    transition: all .2s ease-in-out;
}

.contacto_info li p{
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--color-theme2);
}
.contacto_info li p > span{
    margin-top: 7px;
    font-size: 14px;
    font-weight: 600;
    display: block;
    color: var(--color-theme1);
}

/*===================================================
                       End Contacto
===================================================*/










/*===================================================
                    Start Mesa de Partes
===================================================*/

.mesa_de_partes img{
    max-width: 300px;
}
.mesa_de_partes .section_titulo{
    margin-bottom: 20px;
}
.mesa_de_partes .correo{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mesa_de_partes .correo a{
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    color: var(--color-theme7);
    background-color: var(--color-primario);
}


/*===================================================
                    End Mesa de Partes
===================================================*/


/*===================================================
                    Start Documentos
===================================================*/
.documentos .section_titulo{
    margin-bottom: 20px;
}
.documentos form{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 300px;
    border-radius: 6px;
}
.documentos form button,
.documentos form input,
.documentos form select{
    margin: 0;
}
.documentos form > button{
    margin-left: 10px;
}
.documentos img{
    margin-bottom: 20px;
    width: 100%;
    height: auto;
}




.contenido_texto{
    margin-bottom: 5%;
    color: var(--color-theme10);
}
.contenido_texto p{
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
/*===================================================
                    End Documentos
===================================================*/















/*===================================================
                    Start Tabla
===================================================*/
.contenedor_tabla{
    margin-top: 20px;
    overflow-x: scroll;
  }
  .contenedor_tabla::-webkit-scrollbar{
    width: 4px;
    height: 8px;
    border: 1px solid transparent;
    background: transparent;
  }
  
  .contenedor_tabla::-webkit-scrollbar-thumb{
    background: var(--color-fondo4);
  }
  
  table{
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-theme2);
    border: 1px solid var(--color-theme11);
  }
  th{
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-theme14);
    background-color: var(--color-theme9);
  }
  
  
  tr:nth-of-type(even){ 
    background-color: var(--color-theme7);
  }
  
  td.acciones{
    text-align: center;
  }
  
  td.acciones a{
    display: inline-block;
    margin: 2px 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-theme7);
    background: var(--color-primario);
    border-radius: 4px;
  }
  
  td img{
    height: 70px;
  }


  .datos_generales.vision,
  .informacion_autoridades.funciones,
  .informacion_autoridades.lista_regidores{
    background: var(--color-theme7);
  }
  .lista_regidores .card img,
  .lista_funcionarios .card img{
    border-radius: 0 !important;
  }
  .lista_regidores .card .titulo,
  .lista_funcionarios .card .titulo{
    text-align: center !important;
  }
  .datos_generales img,
  .informacion_autoridades img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }
  .datos_generales .contenido_principal .titulo,
  .informacion_autoridades .contenido_principal .titulo{
    margin-bottom: 20px;
    font-size: 46px;
    line-height: 52px;
    font-weight: 600;
    color: var(--color-theme1);
  }
  .datos_generales .contenido_principal .titulo::after,
  .informacion_autoridades .contenido_principal .titulo::after{
    position: relative;
    display: block;
    content: "";
    margin-top: 10px;
    margin-bottom: 30px;
    height: 5px;
    width: 100px;
    background: var(--color-primario);
  }
  .informacion_autoridades .botones{
    display: flex;
    align-items: center;
  }
  .informacion_autoridades .botones a,
  .lista_regidores .card .boton-extra,
  .lista_funcionarios .card .boton-extra{
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    color: var(--color-theme10);
    background: var(--color-theme14);
    border: 1px solid var(--color-theme11);
  }
  .informacion_autoridades .botones a:last-child,
  .lista_regidores .card .boton-extra,
  .lista_funcionarios .card .boton-extra{
    color: var(--color-theme7);
    background-color: var(--color-primario);
    border: 1px solid var(--color-secundario);
  }
  .lista_regidores .card .boton-extra,
  .lista_funcionarios .card .boton-extra{
    margin-right: 0;
    margin-top: 20px;
    display: block;
    text-align: center;
  }

/*===================================================
                     End Tabla
===================================================*/







/*===================================================
                     PAGINACION
===================================================*/
/* Botones Anterior y Siguiente - Span ... mas paginas*/
.Zebra_Pagination a,
.Zebra_Pagination span{
  color: var(--color-theme2);
}
/*Botones Anterior y Siguiente*/
.Zebra_Pagination a{
  border: 1px solid var(--color-theme5);
  background-color: var(--color-theme7);
}
/* Boton al pasar el mouse y boton Siguiente */
.Zebra_Pagination a:hover {
  color: var(--color-theme1);
  background-color: var(--color-primario);
}
/* Boton Anterior */
.Zebra_Pagination a.disabled:hover { 
  background:  transparent !important;
  color: var(--color-primario);
}
/*Boton Pagina Seleccionada*/
.Zebra_Pagination a.current, .Zebra_Pagination a.current:hover { 
  background:var(--color-primario);
  color: var(--color-theme7);
}
html .Zebra_Pagination a.navigation { 
  filter: chroma(color= #FFFFFF);
}

.Zebra_Pagination {
  padding: 40px 0;
  overflow: hidden;
}

.Zebra_Pagination ul { 
  position: relative; 
  left: 50%; 
  list-style-type: none; 
  float: left;
}

.Zebra_Pagination li { 
  position: relative; 
  float: left; 
  right: 50%;
}

.Zebra_Pagination a { 
  padding: 5px; 
  text-align: center;
  text-decoration: none; 
  margin: 0 2px; 
  display: block; 
  float: left; 
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
}

.Zebra_Pagination a.navigation { 
  border: 1px solid transparent; 
  background-color: transparent;
  overflow: hidden; 
  background-repeat: no-repeat; 
}

.Zebra_Pagination a.previous { 
  padding-left: 25px; 
}

.Zebra_Pagination a.next { 
  padding-right: 25px; 
}

.Zebra_Pagination span { 
  margin-right: 2px; 
  display: block; 
  float: left; 
  padding: 8px 4px;
}

.Zebra_Pagination a.next {
  padding-right: 5px !important;
}

.Zebra_Pagination a.previous {
  padding-left: 5px !important;
}
/*===================================================
                 FIN PAGINACION
===================================================*/












.card,
.card_funciones{
    background: var(--color-theme7);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--color-theme11);

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
}
.card_funciones{
    padding: 20px;
    display: block;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: var(--color-theme2);
}
.informacion_autoridades.funciones .section_titulo{
    margin-bottom: 20px !important;
}
.card_funciones img{
    margin: auto;
    margin-bottom: 20px;
    max-width: 40px;
    height: auto;
    border-radius: 0 !important;
}
.card img{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.card iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.card .card_body{
    position: relative;
    padding: 20px;
    padding-top: 30px;
}

.card .categoria{
    position: absolute;
    top: -12px;
    display: inline-block;
    padding: 6px 10px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: var(--color-theme7);
    background: var(--color-primario);
    border-radius: 4px;
}

.card .titulo{
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--color-theme1);

    /*Limitar cuantas lineas de textos*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3 lineas*/
    overflow: hidden;
}
.card .titulo:hover{
    text-decoration: underline;
}
.card .contenido{
    text-align: left !important;
    margin-top: 10px;
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    color: var(--color-theme2);

    /*Limitar cuantas lineas de textos*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2 lineas*/
    overflow: hidden;
}
.card .fecha{
    margin-top: 30px;
    display: block;
    font-size: 12x;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-primario);
}



.msg{
    margin-top: 20px;
    display: block;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-theme2);
    background: var(--color-theme7);
    border: 1px solid var(--color-theme14);
    border-radius: 6px;
}








/* SLIDER MARCAS */
#marcas{
    padding-top: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-theme14);
}
.slick-slide {
    margin: 0px 10px;

} 
.slick-slide img {
    width: 100%;
}
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
  
  
  
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: auto;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slide:hover{
    background-color: var(--color-theme7);
    -webkit-box-shadow: 0 0 10px 0 rgba(000,000,000,0.2);
    box-shadow: 0 0 10px 0 rgba(000,000,000,0.2);
}
.slide:hover > img{
    border: 1px solid var(--color-primario);
}

.slick-slide img {
    display: block;
    border: 1px solid var(--color-theme5);
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
  
  /* FIN SLIDER MARCAS */
  


.header_titulos{
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.header_titulos h1{
    font-size: 26px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
}
.header_titulos h1::after{
    position: relative;
    display: block;
    content: "";
    margin-top: 10px;
    height: 5px;
    width: 100px;
    background: var(--color-primario);
}
.header_titulos > a{
    padding: 6px 14px;
    display: flex;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: var(--color-theme7);
    background: var(--color-theme1);
    border-radius: 4px;
}
.header_titulos > a:hover{
    background: var(--color-primario);
}




.home_left{
    margin-left: 20px;
    padding: 20px;
    min-height: 100%;
    background-color: var(--color-theme7);
    border: 1px solid var(--color-theme11);
    border-radius: 6px;
}
.home_left .card{
    background: var(--color-fondo);
}
.home_left .card_titulo{
    border-bottom: 1px solid var(--color-theme11);
}
.home_left .card_titulo,
.home_left .card_contenido{
    padding: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
}
.home_left .card_contenido{
    display: flex;
    align-items:start;
    justify-content: center;
    height: auto;
}

.home_left .card_contenido img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio:initial;
    object-fit: cover;
}
.home_left .card_contenido iframe{
    width: 100%;
    height: auto;
    aspect-ratio: inherit;
    min-height: 370px;
}

@media(max-width:1199px){
    .home_left{
        margin-top: 20px;
        margin-left: 0;
    }
    .home_left .card_contenido iframe{
        min-height: 480px;
    }
}




.home_videos{
    background: var(--color-theme7);
    border-top: 1px solid var(--color-theme14);
    border-bottom: 1px solid var(--color-theme14);
    /*background-image: url(assets/img/fondo1.png);
    background-position: center center;
    background-size:auto;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
}
/*.home_videos .header_titulos h1{
    color: var(--color-theme7);
}
.home_videos .header_titulos h1::after{
    background: var(--color-theme1);
}*/












.modal .card .card_header,
.modal .card .card_body{
  padding: 10px 20px;
}
.modal .card{
  margin-bottom: 20px;
  background-color: var(--color-theme7);
  border-radius: 6px;
  border: 1px solid var(--color-theme5);
}
.modal .card_header{
    font-size: 14px;
    font-weight: 500;
    color: var(--color-theme1);
    border-bottom: 1px solid var(--color-theme5);
    box-shadow: 0px 1px 0px 0px var(--color-theme5);
    background-color: var(--color-theme7);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.modal .card_body{
    padding: 20px !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-theme1);
}
.modal img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio:initial !important;
    object-fit: cover;
}



.modal-open{
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid transparent;
}
.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(000,000,000,0.5);
    z-index: 1;
    display: none;
    animation: modal-open .5s;
    -webkit-animation: modal-open .5s;
}
.modal-content{
    position: relative;
    background: var(--color-theme7);
    margin-top: 40px;
    margin-bottom: 40px;
    width: 95%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    z-index: 999999999;
}
.modal-header{
    position: relative;
    padding: 15px 20px;
    padding-right: 40px;
    font-weight: 400;
    font-size: 18px;
}
.modal-header h2{
    font-size: 18px;
    font-weight: 500;
}
.modal-icon{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    color: var(--color-theme7) !important;
    background: var(--color-primario) !important;
    top: 5px;
    right: 20px;
    border: 0;
    outline: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
}
.modal .modal-close:hover{
    cursor: pointer;
    background: var(--color-secundario) !important;
}
.modal-body{
    font-size: 14px;
    font-weight: 400;
    padding: 15px 20px;
}
.modal-footer{
    padding: 15px 20px;
    display: flex;
    justify-content: end;
}
.lista-button{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-button{
    margin-bottom: 0;
    color: var(--color-theme7) !important;
    background: var(--color-primario) !important;
}
.modal-button:hover{
    background: var(--color-secundario) !important;
}

@keyframes modal-open{
    from{
        top: -60px;
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}







.mensaje_web{
    margin-bottom: 20px;
    padding: 20px;
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #72b86c;
    background: #defddb;
    border: 1px solid #72b86c;
}




.card_contenido_noticias .card_header img{
    aspect-ratio:inherit !important;
}
.noticias_ultimas{
    padding-left: 40px;
}
.noticias_ultimas .card{
    margin-bottom: 20px;
}
@media(max-width:767px){
    .noticias_ultimas{
        padding-top: 60px;
        padding-left: 0;
    }
}




.home_enlaces{
    background: var(--color-theme1);
}
.home_enlaces .section_titulo{
    margin-bottom: 40px;
}
.home_enlaces .section_titulo .titulo{
    color: var(--color-theme7);
}
.home_enlaces img{
    display: flex;
    width: 100%;
    height: auto;
}
.home_enlaces .card{
    border: none;
}






.home_obras{
    background: var(--color-primario);
}
.home_obras .section_titulo .titulo{
    color: var(--color-theme7);
}
.home_obras .imagen_home_obras{
    display: flex;
    width: 100%;
    height: auto;
}
.home_obras .card{
    border: none;
}

.card_obras img{
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio:inherit;
}



.paginas section{
    padding: 0;
    margin: 0;
}
.paginas p{
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
}
.paginas p,
.paginas h1,
.paginas h2,
.paginas h3,
.paginas h4,
.paginas h5,
.paginas h6,
.paginas span,
.paginas a,
.paginas i{
    color: var(--color-theme2);
}


.card_contenido_noticias .contenido{
    text-align: left !important;
    margin-top: 10px;
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    color: var(--color-theme2);

    /*Limitar cuantas lineas de textos*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:initial !important; /* 2 lineas*/
    overflow: hidden;
}
.card_contenido_noticias img{
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    width: auto !important;
    height: auto !important;
}
.card_contenido_noticias .card_header img{
    width: 100% !important;
}