.fab-container {
  position: fixed;
  bottom:15px;
  left: 25px;
  z-index: 2000;
}

.fab-main {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  background-image: url('image/logos/boton-casa-sal-1.png'); /* img btn flotante */
  background-size: 100%;         /* Ajusta tamaño btn flotante */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.996);
  font-size: 32px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.fab-main:hover {
  transform: scale(1.1);
}

.fab-sub {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Botón accesibilidad */
.accesibilidad-sub {
  background: #9F2341;
}
#accesibilidad-sub.active,
#speechButton.active {
  animation: pulse 0.4s ease;
  box-shadow: 0 0 0 4px #BE9C60;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Botón SUAC */
.suac-sub {
  background: #E6E1E7;
}

/* Botón conferencia */
.conferencia-sub {
  background: #0b312c;
}

.whatsapp-sub {
  background: #E6E1E7;
}


.CDMX-sub {
  background: #E6E1E7;
}

/* Mostrar subbotones al abrir */
.fab-container.open .fab-sub {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Estilo del SVG de Boton accesibilidad Y Whatsapp */
.color_svg {
  fill: #BE9C60;
}









/***********CARRUSEL INICIAL TARJETA DE TEXTO BLUR PARA ESCRITORIO, CELULARES, TABLETAS*******/
.carousel-caption {
  background: #0000004f;
  /* Fondo semitransparente */
  backdrop-filter: blur(50px);
  /* Desenfoque */
  border-radius: 10px;
  padding: 10px 15px;
  /* Espaciado ajustado */
  width: max-content;
  /* Reduce al mínimo según el contenido */
  left: 50%;
  transform: translateX(-50%);
  /* Centrado exacto */
  bottom: 5%;
  /* Ajusta altura */
  text-align: center;
}

/************* Ajustes para tabletas************* */
@media (max-width: 1024px) {
  .carousel-caption {
    backdrop-filter: blur(30px);
    /* Menos desenfoque en tabletas */
    padding: 8px 12px;
    /* Reducir padding */
    font-size: 13px;
    /* Ajustar tamaño de texto */
    bottom: 6%;
    /* Subir un poco */
  }
}

/****************** Ajustes para tabletas ***************/
@media (max-width: 768px) {
  .carousel-caption {
    backdrop-filter: blur(20px);
    /* Blur más suave */
    padding: 6px 10px;
    /* Padding más pequeño */
    font-size: 3vw;
    /* Tamaño del texto relativo a la pantalla */
    bottom: 5%;
    /* Subir más en móviles */
    max-width: 90%;
    /* Evita que el texto se salga del contenedor */
    text-align: center;
    /* Centrar el texto */
    word-wrap: break-word;
    /* Permitir saltos de línea */
  }
}

.texto_carruselP {
  /*cambia color titulo principal seccion noticia*/
  color: #ffffff;
}

/********FIN*******/


.photo-gallery {
  color: #313437;
}

.photo-gallery .photos {
  padding-bottom: 20px;
}

.photo-gallery .item {
  padding-bottom: 50px;
}

/*TEXTO Y ZOM EN FOTOS DE GALERIA PAGINA WEB*/

.zoom_imgG {
  transition: transform .2s;

}

.zoom_imgG:hover {
  transform: scale(1.05);
}

.texto_galeria {
  /*cambia color titulo principal seccion noticia*/
  color: #E6E1E7;
}

.texto_galeriaR {
  /*cambia color titulo principal seccion noticia*/
  color: #9F2341;
}

.texto_galeriaD {
  /*cambia color titulo principal seccion noticia*/
  color: #BE9C60;
}

.contenedor_IMG {
  position: relative;
  display: inline-block;
  text-align: center;
}

/*********************FIN**********************/




/*modifica controles en carrusel pagina boletines web*/

/* Cambiar color de las flechas de carrusel boletines */
.prev_color,
.next_color {
  background-color: #BE9C60;
  /* Cambia el color aquí */
  border-radius: 100%;
  /* Opcional: forma redonda */
}

/* Cambiar color de los indicadores en boletines*/
.indicators_color [data-bs-target] {
  background-color: #9F2341;
  /* Cambia el color aquí */
}

/* Color del indicador activo */
.indicators_color .active {
  background-color: #BE9C60;
  /* Cambia el color aquí */
}



.boletin1 {
  background-color: #ffffff;
  -webkit-transition: background-color 1s linear;
  transition: background-color 1s linear;

}

.boletin1:hover {
  background-color: rgb(230, 225, 231);
}

/**imagen de fondo para los divs de inicio y com-social*/

.img_fondo {
  background-size: cover;
  background-image: url('image/fondos/p7.png');


}

/**DIRECTORIO*/

.subtitulo_directorio {
  /*cambia color titulo principal en directorio*/
  color: #ffffff;
}

.list-group-item.active {
  border: none;
  background-color: #9F2341;
  /* Color de fondo personalizado */
  color: #ffffff;
  /* Color de texto personalizado */
}

.altura {
  height: 26rem;
}

.altura2 {
  height: 30rem;
  position: absolute;
  top: 0;
  left: 0;
}

/**EFECTOS TEXTO SUB MENU NAVBAR*****/
.menuD {

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #BE9C60;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

  &:hover {
    color: #BE9C60;

    &::before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
}

.texto_fondo2:hover {
  color: #BE9C60 !important;
}




/*lector pdf en directorio responsivo*/
.pdf-container {
  width: 100%;
  max-width: 100%;
  /* Asegura que no se estire más allá de su contenedor */
  height: 0;
  padding-bottom: 75%;
  /* Define un ratio de aspecto (en este caso 4:3) */
  position: relative;
  overflow: hidden;
}

.pdf-container embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/****************Boton accesibilidar*********/

.accesibilidad {
  display: block;
  position: fixed;
  z-index: 2000;
  left: 12px;
  top: 90%;
  border-radius: 100%;
  text-decoration: none;
  background: #9F2341;
  padding: 20px;
}

.accesibilidad.dif img {
  display: block;
  width: 50px;
  height: 30px;
  margin: auto;
  border-radius: 100%;
}

.accesibilidad.dif img {
  display: block;
  margin: auto;
  border-radius: 50%;
  transition: transform .2s;
}

.accesibilidad:hover {
  transform: scale(1.1);
}

@media (max-width: 1024px) {

  /* Ajuste para tabletas */
  .accesibilidad {
    top: 80%;
    /* Mueve el botón más arriba */
  }
}



/****************Boton SUAC****************/

.suacbtn {
  display: block;
  position: fixed;
  z-index: 2000;
  left: 12px;
  top: 80%;
  border-radius: 50%;
  /* Sigue siendo un círculo */
  text-decoration: none;
  background: #E6E1E7;
  padding: 20px;
  /* Reducimos el tamaño del padding */
  width: 80px;
  /* Definimos un ancho fijo */
  height: 80px;
  /* Definimos una altura fija */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {

  /* Ajuste para tabletas */
  .suacbtn {

    top: 60%;
    /* Mueve el botón más arriba */
  }
}

@media (max-width: 768px) {

  /* Ajuste para celulares */
  .suacbtn {
    top: 70%;
  }
}

.suacbtn.dif img {
  display: block;
  margin: auto;
  border-radius: 50%;
  transition: transform .2s;
}

.suacbtn:hover {
  transform: scale(1.1);
}


/**boton conferencias*/

.conferenciabtn {
  display: block;
  position: fixed;
  z-index: 2000;
  right: 12px;
  top: 85%;
  border-radius: 50%;
  /* Sigue siendo un círculo */
  text-decoration: none;
  background: #0b312c;
  padding: 20px;
  /* Reducimos el tamaño del padding */
  width: 120px;
  /* Definimos un ancho fijo */
  height: 120px;
  /* Definimos una altura fija */
  display: flex;
  align-items: center;
  justify-content: center;
}



@media (max-width: 1024px) {

  /* Ajuste para tabletas */
  .conferenciabtn {
    top: 70%;
    /* Mueve el botón más arriba */
    width: 90px;
    /* Definimos un ancho fijo */
    height: 90px;
    /* Definimos una altura fija */
  }
}

@media (max-width: 768px) {

  /* Ajuste para celulares */
  .conferenciabtn {
    top: 70%;
    width: 90px;
    /* Definimos un ancho fijo */
    height: 90px;
    /* Definimos una altura fija */
  }
}

.conferenciabtn.dif img {
  display: block;
  margin: auto;
  border-radius: 50%;
  transition: transform .2s;
}

.conferenciabtn:hover {
  transform: scale(1.1);
}



/**color icono svg accesibilidad*/
.color_svg {
  fill: #BE9C60;
  /* Cambia el color del ícono */
}


/*******************VENTANA CESAC Y VU******************/

.texto_tramites {
  /*cambia color titulo principal seccion noticia*/
  color: #9F2341;

}

.medida_imagen {
  /*forza medida imagenes en seccion noticias*/
  width: 450px;
  height: 300px;

}

.centrar {
  text-align: center;
}



/******* SECCION NOTICIAS****/

.texto_noticia {
  /*cambia color titulo principal seccion noticia*/
  color: #9F2341;
}

.texto_noticia2 {
  /*cambia color fecha seccion noticia*/
  color: #BE9C60;

}

.imagen_noticias {
  /*forza medida imagenes en seccion noticias*/
  width: 300px;
  height: 300px;
}

.btn-noticias {
  background-color: #9F2341;
  /* Cambia color boton */
  color: white;
  /* Color del texto boton */
}

.izquierdaF {
  text-align: left;
  /*alinea texto a izquierda en seccion noticias*/
}

.izquierdaR {
  text-align: right;
  /*alinea texto a izquierda en seccion noticias*/
}

/* Aseguramos que el carrusel esté centrado horizontalmente */
.carousel-container {
  display: flex;
  justify-content: center;
}




/**************NAVBAR************/
.centro_imagenes {

  text-align: center;
}

.navbar-brand img {
  position: relative;
  top: -20px; /* súbelo o bájalo ajustando este valor */
}




/**efecto zoom logo en NAVBAR*/

.zoom {
  transition: transform .2s;
}

.zoom:hover {
  transform: scale(1.1);
}

.zoom_text {
  transition: transform .2s;
}

.zoom_text:hover {
  transform: scale(1.1);
}



/**EFECTOS TEXTO SUB MENU NAVBAR*****/
.menu {

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #72263D;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

  &:hover {
    color: #72263D;

    &::before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
}

.texto_fondo:hover {
  color: #72263D !important;
}


/**EFECTOS ANIMACIÓN TEXTO SUB MENU NAVBAR*****/

.dropdown-menu {
  /**Modifica el tiempo de visualizacion de la NAVBAR al con breve efecto de abajo hacia arriba en DROPDOWN */
  animation: .3s slideup;
}

@keyframes slideup {
  from {
    transform: translateY(10%);
  }

  to {
    transform: translateY(0%);
  }
}

/*.dropdown:hover .dropdown-menu{
        display: block; /**efecto que muestra el DROPDOWN al deslizar mouse sobre opciones de la NAVBAR*/
/*}**/


.textbar {
  font-size: 18px;
  /**TAMAÑO TEXTO NAVBAR*/

}

.textdropdown {
  font-size: 13px;
  /**TAMAÑO TEXTO MENU DROPDOWN*/
}


@font-face {
  font-family: Ibrand;
  src: url('fonts/Ibrand.woff2');
}

.text_ibrand {
  font-family: Ibrand;
  letter-spacing: 0.06em;

}


      .navbar {
          background: #a8a8a8!important;  
      }

/***SUB MENU NAVBAR**/
.dropdown-submenu:hover .dropdown-menu {
  display: block;
  /** MUESTRA SUBMENU AL DESPLAZAR MOUSE*/
  left: 100%;
  /**DECLARA TAMAÑO MARGEN IZQUIERDO*/
  top: 0;
  /**dECLARA TAMAÑO MARGEN SUPERIOR*/
}




/***FIN NAVBAR**/




/**TARJETAS CESAC**/


/**efecto zoom tarjetas CESAC*/
.zoom_target {
  transition: transform .2s;
}

.zoom_target:hover {
  transform: scale(1.05);
}

.zoom_target2 {
  transition: .2s;
}

.zoom_target2:hover {
  transform: scale(1.01);
}

/**fondo parrafo <p> cesac*/
.div-cesac {
  background: #72263D;
  /*
      background:#72263D;
      top: -45px;
      width: 103rem;
      position: relative;
      left: 20px;*/
}

.div-cesac2 {
  background: #72263D;
  height: 150px;

}

/**color fondo tarjeta cesac*/
.fondo-target {
  background-color: #ffffff;
}

/**FIN TARJETAS CESAC**


/**color  fondo noticias*/
.div-noticias {
  background: rgb(31, 30, 30);

  /*top: -45px;
    width: 103rem;
    position: relative;
    left: 20px;*/
}

/**color  fondo noticias*/
.div-areas {
  background: rgb(253, 253, 253);


  /*top: -45px;
    width: 103rem;
    position: relative;
    left: 20px;*/
}

/**color  fondo secc. comunidad*/
.div-comunidad {
  background: #55585A;



  /*top: -45px;
  width: 103rem;
  position: relative;
  left: 20px;*/
}

.fondo-footer {
  background: #55585A;




  /*top: -45px;
  width: 103rem;
  position: relative;
  left: 20px;*/
}

.margin-body {
  padding-top: 14rem;
  margin-left: 2rem;
}

/*acomoda el margen del body de altura y lado izquierdo*/



/*
  
  .banner-image {
    background-image: url('image/carrucel/iztacalco1.jpg');
    background-size: cover;

  }
  
  .banner-image2 {
    background-image: url('image/carrucel/iztacalco2.jpg');
    background-size: cover;
  }
    
  .banner-image3 {
    background-image: url('image/carrucel/iztacalco3.jpg');
    background-size: cover;
  }

    .banner-image4 {
    background-image: url('image/carrucel/iztacalco4.jpg');
    background-size: cover;
  }

  .banner-image5 {
    background-image: url('image/carrucel/iztacalco5.jpg');
    background-size: cover;
  }

  .banner-image6 {
    background-image: url('image/carrucel/iztacalco6.jpg');
    background-size: cover;
  }

  .banner-image7 {
    background-image: url('image/carrucel/iztacalco7.jpg');
    background-size: cover;
  }

  .banner-image8 {
    background-image: url('image/carrucel/iztacalco8.jpg');
    background-size: cover;
  }

  .banner-image9 {
    background-image: url('image/carrucel/iztacalco9.jpg');
    background-size: cover;
  }

  .banner-image10 {
    background-image: url('image/carrucel/iztacalco10.jpg');
    background-size: cover;
  }

  .banner-image11 {
    background-image: url('image/carrucel/iztacalco11.jpg');
    background-size: cover;
  }


  */
/****************************************BANER IMAGEN 1 CARRUSEL PRINCIPAL INICIO**********************************/
.banner-image {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco1_opt_2.jpeg');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}

/****************************************BANER IMAGEN 2 CARRUSEL PRINCIPAL INICIO**********************************/

.banner-image2 {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco2_opt.jpeg');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image2 {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image2 {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image2 {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}

/****************************************BANER IMAGEN 3 CARRUSEL PRINCIPAL INICIO**********************************/

.banner-image3 {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco3_opt.jpeg');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image3 {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image3 {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image3 {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}

/****************************************BANER IMAGEN 4 CARRUSEL PRINCIPAL INICIO**********************************/

.banner-image4 {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco4_opt.jpeg');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image4 {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image4 {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image4 {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}

/****************************************BANER IMAGEN 5 CARRUSEL PRINCIPAL INICIO**********************************/

.banner-image5 {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco5_opt.jpeg');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image5 {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image5 {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image5 {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}

/****************************************BANER IMAGEN 6 CARRUSEL PRINCIPAL INICIO**********************************/

.banner-image6 {
  margin-top: -13rem;
  background-image: url('image/carrucel/iztacalco6.webp');
  background-size: contain;
  /* Ajusta la imagen para que quepa sin recortar */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repeticiones */
  width: 100%;
  /* Ocupa todo el ancho disponible */
  height: 100vh;
  /* Ajusta la altura para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para dispositivos pequeños (mantener una altura mínima adecuada) */
@media (max-width: 767px) {
  .banner-image6 {
    height: 50vh;
    /* Ocupa la mitad de la pantalla en móviles */
    background-size: cover;
    /* Asegura que la imagen llene el div */
  }
}

/* Para tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-image6 {
    margin-top: 10rem;
    background-size: cover;
  }
}

/* Para pantallas grandes */
@media (min-width: 1024px) {
  .banner-image6 {
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    background-size: cover;
    /* Se asegura de llenar el div */
  }
}




.blur {
  -webkit-backdrop-filter: blur(170px);
  backdrop-filter: blur(170px);
  background: rgba(80, 79, 79, 0.644);
}

li {
  padding: 5px;
  position: relative;
}



.li_icon {
  margin: 0px;
  padding: 0px;
  position: relative;
  left: 35px;
  top: 5px;
}


/**cards con css*/


/*
flip card
*/

/**Carusel en Nombre de areas*/

.cont-princ-slider {
  height: 250px;
  overflow: hidden;
  width: 60%;
  margin: auto;
}

.slier-prin {
  display: inline-flex;
  -moz-animation: slider 30s infinite linear;
  -webkit-animation: slider 30s infinite linear;
  animation: slider 30s infinite linear;
  height: 100%;
  width: auto;

}

.juegos_DWG {
  border: none;
  line-height: 100px;
  height: 150%;
  flex: 0 0 auto;
  text-align: center;
  width: 150px;
}

.text_carrusel {
  font-size: 13px;
  text-align: center;
  color: rgb(36, 36, 36);
  text-justify: inter-word;
  font-family: Verdana;

}

h2 {

  font-weight: bold;
  font-size: 25px;
  font-family: verdana;
  text-align: center;

}

@keyframes slider {
  to {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}


/***/

.line {
  width: 27%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.lineG1 {
  width: 31%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}


.lineG2 {
  width: 33%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.lineG3 {
  width: 35%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}


.lineG4 {
  width: 37%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.lineG5 {
  width: 39%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line2 {
  width: 13%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #BE9C60;
}

.line3 {
  width: 17%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.lineG {
  width: 20rem;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line4 {
  width: 23%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #BE9C60;
}

.line5 {
  width: 24%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #BE9C60;
}

.line6 {
  width: 19%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line7 {
  width: 25%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line8 {
  width: 23%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line9 {
  width: 21%;
  height: 3px;
  border: 0 none;
  margin-right: auto;
  margin-left: auto;
  margin-top: -1rem;
  margin-bottom: 10px;
  background-color: #72263D;
}

.line7p {
  width: 26%;
  /**ancho de linea */
  height: 3px;
  /**Grueso de la linea*/
  border: 0 none;
  margin-right: auto;
  /**posicion eje x derecha*/
  margin-left: 0px;
  /**posicion eje " x " izquierda*/
  margin-top: 0px;
  /**posicion eje " y " arriba*/
  background-color: #BE9C60;
  /**color linea*/
}

.line8p {
  width: 26%;
  /**ancho de linea */
  height: 3px;
  /**Grueso de la linea*/
  border: 0 none;
  margin-right: auto;
  /**posicion eje x derecha*/
  margin-left: 0px;
  /**posicion eje " x " izquierda*/
  margin-top: 0px;
  /**posicion eje " y " arriba*/
  background-color: #72263D;
  /**color linea*/
}

.line9p {
  width: 18%;
  /**ancho de linea */
  height: 3px;
  /**Grueso de la linea*/
  border: 0 none;
  margin-right: auto;
  /**posicion eje x derecha*/
  margin-left: 33rem;
  /**posicion eje " x " izquierda*/
  margin-top: -1rem;
  /**posicion eje " y " arriba*/
  background-color: #72263D;
  /**color linea*/
}

/**carrusel vertical*/

/*Tamaño y espaciado de las letras*/
.p-size {
  line-height: 30px;
  font-size: 20px;
}

.p-size2 {
  font-size: 18px;
}

/*Color y tamaño de los enlaces*/
.color_link {
  color: rgb(90, 90, 90);
  text-decoration: none;
  transition: color 0.3s;
  font-size: 17px;
  word-wrap: break-word;
}

/*COLOR DE ETIQUETA <A> EN DIRECTORIO Y OTRAS SECCIONES */
.color_link2 {
  color: inherit;
  text-decoration: none;
}

.color_link:hover {
  color: #b01858;

}

.color_btn1 {
  color: #ffff;
  background-color: #b01858;
  border: none;
}

.color_btn1:hover {
  background-color: #b01858;
  color: #ffff;
}

.color_btn2 {
  color: #ffff;
  background-color: #e7c487;
  border: none;
}

.color_btn2:hover {
  background-color: #BE9C60;
  color: #ffff;
}



/*tarjeta pdf concejales 2027 cambio color al pasar mouse*/

.caja1 {
  background-color: #BE9C60;
  -webkit-transition: background-color 1s linear;
  transition: background-color 1s linear;

}

.caja1:hover {
  background-color: #9F2341;
}

.caja2 {
  background-color: #72263D;
  -webkit-transition: background-color 1s linear;
  transition: background-color 1s linear;

}

.caja2:hover {
  background-color: #BE9C60;
}

.img_mision {
  height: 150px;
  width: 240px;

}

.letra_separacion {
  letter-spacing: 0.08em;
}

.letra_visionM2 {
  letter-spacing: 0px;
  font-size: 18px;

}

.letra_visiont3 {
  font-size: 15px;
}

.letra_quienes {
  color: #BE9C60;
}

.bg-img {
  /*establece fondo con imagen en section*/
  background-image: url("image/fondos/fondoRD.png ");
  background-size: cover;

}

.bg-img2 {
  /*establece fondo con imagen en section*/
  background-image: url("image/fondos/fondoBN.png ");
  background-size: cover;

}

/***video responsivo secciÓn toma protesta html*/
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.espacio_i {
  margin-right: 8px;
  /* Ajusta el valor según necesites */
}

/***Video responsivo del mes*/

  .video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }





/*Ajusta el espacio de arriba de los iconos en la seccion de Áreas*/
.margin_areas {
  margin-top: 10px;
}

.margin_areas2 {
  margin-top: 15px;
}

.padding_areasr {
  padding-right: 110px;
}

/*Ajusta el banner de titulo debajo de la navbar en las diferentes paginas*/
.banner_pading {
  padding-top: 15.5rem;
}

/*Ajusta el contenido dentro del banner de titulo*/
.banner_content {
  padding-top: 50px;
}

@media (max-width: 768px) {
  .nav-item {
    margin-right: 2px;
    /* Menor margen en pantallas pequeñas */
  }
}

/*Efecto de desaparición y aparición de imagenes*/

.ocultar {
  opacity: 0;
  transition: all 1.3s;
  transform: translateX(-100px);
  filter: blur(2px);
}

.mostrar {
  opacity: 1;
  transform: translateX(0px);
  filter: blur(0);
}

/*Hace que en un grupo las imagenes desaparezcan y aparezcan por separado, para que funcione aparte tienes que agregar la clase .ocultar a los que lleven la clase .ocultar separado*/
.ocultar-grupo {
  display: flex;
}

.ocultar-separado:nth-child(2) {
  transition-delay: 200ms;
}

.ocultar-separado:nth-child(3) {
  transition-delay: 400ms;
}

.ocultar-separado:nth-child(4) {
  transition-delay: 600ms;
}

/*Hasta aqui termina*/

/*Estilos para el Modo Alto Contraste*/
.high-contrast {
  background-color: black !important;
  color: white !important;
}

.high-contrast a {
  color: yellow !important;
}

/*Opciones de accesibilidad*/

.opciones-accesibilidad {
  background: #BE9C60;
  border: none;
  color: white;
  margin: 5px;
  padding: 8px 15px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}

.menu-accesibilidad {
  background: #9F2341;
  border: none;
  color: white;
  margin: 5px;
  padding: 8px 15px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}