:root {
   --wine: #691B31 !important;
   --gold: #cdb589 !important;
}
body {
	/* font-family: 'Montserrat', sans-serif;*/
	font-family: Montserrat, Arial, Helvetica Neue, Helvetica, 
	font-weight: 500;
	text-align: left;
	font-size: 18px;
	line-height: 17px;
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	padding-top: 110px; /* Ajusta este valor según la altura combinada de tus menús */
}
.modal-header
{
	background: #691a32;
	color: white;
}
hr
{
	color:#121212;
}
/* Estilo nav */
#navMain {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: white; /* Asegura que el fondo sea visible */
}

#navMain #logo {
    width: 250px;
}

#navMain #navBarMenu {
    justify-content: flex-end;
}

#navMain #navBarMenu li a {
    transition: all 1s ease;
}

#navMain #navBarMenu li:hover a,
#navMain #navBarMenu li:active a {
    color: #691a32;
    text-decoration: underline;
}

/* Segunda barra de navegación */
#navSecondary {
    width: 100%;
    position: fixed;
    top: 60px; /* Ajusta según la altura de #navMain */
    z-index: 999; /* Un z-index menor que #navMain */
    background: #691B31;
}

#navSecondary #navBarSecondary {
    justify-content: flex-end;
}

#navSecondary #navBarSecondary li a {
    color: white;
    transition: all 1s ease;
}

#navSecondary #navBarSecondary li:hover a,
#navSecondary #navBarSecondary li:active a {
    color: gray;
    text-decoration: underline;
}

/*Pagina principal*/

/*Carousel*/
#carouselMain img 
{
	margin: 15px auto;
}
#carouselMain .carousel-control-next > span, 
#carouselMain .carousel-control-prev > span {
    background-color: #8c1d4a96;
    background-size: 45px; /* Ajusta el tamaño del icono */
    background-position: center; /* Centra el icono dentro del botón */
    background-repeat: no-repeat;
    border-radius: 20%;
    width: 35px; /* Ajusta el tamaño del control */
    height: 60px; /* Ajusta el tamaño del control */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Titular*/

#refrendoSection
{
	background: #fff;
	text-align: center;
	padding: 30px 0;
}
#refrendoSection h4,
{
	font-weight: bold;
	color:#495057;
	text-align: left;
}
#refrendoSection
{
	font-weight: bold;
}
#refrendoSection a
{
	background: #691B32;
	color: white;
	font-size: 12px;
	padding: 10px;
	border-radius: 7px;
	text-decoration: none;
}
#refrendoSection a i
{
	margin-right: 10px;
}
/*Tramites*/

#tramitesSeccion p 
{
	padding: 30px 0;
	font-size: 18px;
	text-justify: 0;
}

#tramitesSeccion .row
{
	margin-block: 15px;

}
#tramitesSeccion h4
{
	font-weight: bold;
	color:#495057;
	text-align: left;
}
#tramitesSeccion h3
{
	font-weight: bold;
	color:#691B31;
	text-align: left;
}
#tramitesSeccion .row .col-md-3 a
{
	width: 100%;
	display: block;
	overflow: hidden;
	border: 1px solid gray;

}
#tramitesSeccion .row .col-md-3 img
{
	width: 100%;
	transition: all 1s ease;
}
#tramitesSeccion .row .col-md-3 a:hover img,
#tramitesSeccion .row .col-md-3 a:active img
{
	object-fit:cover ;
	transform: scale(1.5);
}
#ubicacionSection
{
	background: #e1e1e1;
	padding: 30px 0;
}
#ubicacionSection h4
{
	font-weight: bold;
	color:#495057;
	
}
#ubicacionSection .list-group a 
{
    display: flex;
    margin: 5px;
    text-decoration: none;
    color: black;
    font-weight: 700;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    transition: all .5s ease;
}
#ubicacionSection .list-group a:hover,
#ubicacionSection .list-group a:active
{
	font-weight: 900;
}
#ubicacionSection .list-group .list-group-item
{
	background: transparent;
}
#ubicacionSection iframe
{
	width: 100%;
}
#textSection {
      font-family: 'Montserrat', sans-serif;
    }
    .textSection p {
      text-align: left;
    }


.justificar{
	text-align: justify !important;
	font-size: 18px !important;
}

.border-gold{
	border-color: #BC955B !important;
}

a {
  margin-right: 10px; /* Ajusta el valor según lo necesites */
}


.content {
    flex: 1;
}




/*Footer*/
footer
{
	min-height:209px;
	background:#691B32;
	padding: 10px 0;
}
footer .container > .row
{
	min-height:209px;
}
footer .container > .row .col-md-4
{
	text-align: center;
}
footer .container .row img
{
	display: block;
	margin: auto;
	max-width: 200px;
}
footer #qr-link
{
	position: fixed;
	top: calc(100vh - 200px);
	right: 0;
}
footer #qr-link img
{
	width: 150px;
}
@media(max-width:768px)
{
	footer
	{
		min-height:auto;
	}
	footer .container > .row
	{
		min-height:auto;
	}
	footer .container .row img
	{
		margin: 30px auto;
	}
}


  .iframe-container {
      position: relative;
      width: 100%;
      padding-bottom: 75%; /* Aspect ratio */
      height: 0;
      overflow: hidden;
      max-width: 100%;
      background: #000;
    }
    .iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }



html, body {
    height: 100%;
    margin: 0;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 60%; /* Asegura que la página use la altura completa de la ventana */
}

.page-content {
    flex: 1; /* Hace que el contenido ocupe todo el espacio disponible */
}

footer {
    background-color: #691B32; /* Ya tienes este estilo */
    padding: 10px 0;
}

.footer1 {
  margin-top: 240px; /* Ajusta el valor según sea necesario */
}

.footer2 {
  margin-top: 80px; /* Ajusta el valor según sea necesario */
}

.footer3 {
  margin-top: 350px; /* Ajusta el valor según sea necesario */
}



/* Espaciado general entre columnas */


/* Alinear contenido dentro de cada columna */
.col-md-4 {
    flex: 1 1 calc(33.333% - 30px); /* Ocupa el 33.33% del ancho con espacio entre columnas */
    max-width: 33.333%; /* Asegura el ancho máximo de la columna */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenido a la izquierda */
    text-align: left;
    box-sizing: border-box; /* Para incluir el padding en el tamaño total */
    margin-bottom: 30px; /* Espacio debajo de cada columna */
}

/* Mantener las imágenes circulares sin deformarse */
.circle-bg {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Hace que el contenedor sea circular */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.circle-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el contenedor sin deformarse */
    border-radius: 5%; /* Mantiene la imagen circular */
}

/* Ajustes para los textos */
.text-info {
    margin-top: 10px; /* Espacio entre la imagen y el texto */
    color: #961b31;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word; /* Evita que el texto desborde su contenedor */
    text-align: left;
}


/* Responsive: Ajustes para pantallas muy pequeñas */
@media (max-width: 700px) {
    .col-md-4 {
        flex: 1 1 calc(100% - 15px); /* En pantallas pequeñas, mostrar 1 columna */
        max-width: 100%; /* Las columnas ocupan todo el ancho en pantallas pequeñas */
    }
}



/* Ajusta el la imgenes de la pagina */
.circle-bg {
  background-color: #691B32;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px; /* Ajusta el tamaño del círculo según lo necesites */
  height: 80px;
  margin-right: 0.5rem; /* Reduce el espacio entre la imagen y el texto */
}

.small-img {
  max-width: 40px; /* Ajusta el tamaño de la imagen dentro del círculo */
  max-height: 40px;
}

.text-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #BC955B !important; /* Color inicial del texto */
  font-weight: 700; /* Texto más grueso */
}

a.link-hover {
  display: flex;
  align-items: center; /* Alinea la imagen y el texto verticalmente */
  text-decoration: none; /* Remueve el subrayado del enlace */
  gap: 0.2rem; /* Ajusta el espacio entre la imagen y el texto */
}

a.link-hover:hover .text-info {
  color: #691B32 !important; /* Cambia el color del texto al pasar el mouse */
}


.custom-text-color {
    color: #BC955B; /* Cambia este color al que desees */
    margin-top: revert;
}




/* Estilos para el botón de Excel */
.btn-excel {
    background-color: #28a745; /* Color verde */
    color: white !important; /* Color del texto */
    border: none; /* Sin borde */
    padding: 6px 20px; /* Ajusta el padding según sea necesario */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Esquinas redondeadas */
}

.btn-excel:hover {
    background-color: #218838; /* Color verde más oscuro al pasar el mouse */
}

/* Estilos para el botón "Ver tabla" */
.btn-wine {
    background-color: #961b31; /* Color vino */
    color: white !important; /* Color del texto */
    border: none; /* Sin borde */
    padding: 6px 20px; /* Ajusta el padding según sea necesario */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Esquinas redondeadas */
}

.btn-wine:hover {
    background-color: #7a151f; /* Color vino más oscuro al pasar el mouse */
}

/* Estilos específicos para el enlace .zip */
.card_trimestre a {
    color: white; /* Cambiar el color solo para los enlaces dentro de card_trimestre a blanco */
    text-decoration: none; /* Sin subrayado */
}

.card_trimestre a:hover {
    color: #ddd; /* Color al pasar el mouse */
}

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


.mi-titulo {
    padding-bottom: 0rem !important; /* Ajusta el valor de padding a lo que desees */
}


/*ACCORDION*/
.accordion{
    --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23691B31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23691B31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(188, 149, 91, 0.25);
    --bs-accordion-active-color:var(--wine);
    --bs-accordion-active-bg:var(--gold)