/********************* BOTONES SOCIALES *********************/

/* Contenedor grid */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 botones por fila */
  gap: 0;                               /* SIN espacio entre botones */
  width: max-content;
  margin: 0 auto;                      /* CENTRADO */
}

/* Cada botón */
.social-box {
  width: 60px;
  height: 60px;
  background: transparent;             /* fondo transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Iconos */
.social-box i {
  font-size: 28px;
  color: #000000;                      /* negro */
}

/* Ajuste de columnas Bootstrap (si se usan col-6) */
.footer-social .col-6 {
  padding: 2px;                        /* muy poco espacio */
}

/* RESPONSIVE – MÓVIL */
@media (max-width: 768px) {
  .social-grid {
    justify-content: center;            /* mantiene centrado */
  }

  .social-box {
    width: 56px;
    height: 56px;
  }

  .social-box i {
    font-size: 26px;
  }
}
/****************fin seccion sociales foooter******************************/

/*************BTN ARRIBA****************/
#btnArriba {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #820046; /* guinda institucional */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 22px;
  cursor: pointer;
  display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

#btnArriba:hover {
  background-color: #820046;
}

/***********************************TARJETAS CS SOCIALES******************************+*/

.tarjeta_socialCS {
  background-color: #820046;
  color: white;  
}

.social-card { /**cambia el diseño de la tarjeta para redes sociales*********/
  height: 650px;/* ajusta de altura */
  display: flex;
  flex-direction: column;
}

.social-card .card-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
}

.social-embed {
  height: 100%;
  overflow-y: auto;
}

.social-embed iframe {
  width: 100%;
  min-height: 100%;
  border: 0;
}


/* ********************************Carrusel dentro del modal carrusel inicio***********************/
.modal-carousel-bs {
  max-width: 900px;
  margin: 0 auto 30px;
  border-radius: 14px;
  overflow: hidden;
  background-color: transparent !important;
}

.modal-carousel-bs img {
  height: 420px;
  object-fit: contain;
  background-color: transparent !important;
}

@media (max-width: 768px) {
  .modal-carousel-bs img {
    height: 260px;
  }
}

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

/************************************colores iconos navbar ****************************************/

.facebook-icon_color {
    width: 24px;
    height: 24px;
    display: inline-block;

    /* Color oficial de Facebook */
    background: #1877F2;

    /* Máscara usando el ícono original de Bootstrap */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-facebook' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E") 
        no-repeat center / contain;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-facebook' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E") 
        no-repeat center / contain;
}

.facebook-icon_color_CS {
    width: 30px;
    height: 30px;
    display: inline-block;

    /* Color oficial de Facebook */
    background: #1877F2;

    /* Máscara usando el ícono original de Bootstrap */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-facebook' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E") 
        no-repeat center / contain;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-facebook' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E") 
        no-repeat center / contain;
}

.instagram-icon_color {
    width: 30px;
    height: 30px;
    display: inline-block;
    
    /* Degradado oficial de Instagram */
    background: radial-gradient(circle at 30% 30%, 
        #fdf497 0%, 
        #fdf497 30%, 
        #fd5949 45%, 
        #d6249f 60%, 
        #285AEB 90%);

    /* Usar el SVG del ícono Bootstrap como máscara */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-instagram' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/%3E%3C/svg%3E")
     no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-instagram' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/%3E%3C/svg%3E") 
    no-repeat center / contain;
}

.youtube-icon_color {
    width: 30px;
    height: 30px;
    display: inline-block;

    /* Color oficial de YouTube */
    background: #FF0000;

    /* Máscara usando el ícono original de Bootstrap */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-youtube' viewBox='0 0 16 16'%3E%3Cpath d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.130 1.544-.210 2.654-.260l.170-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/%3E%3C/svg%3E") 
        no-repeat center / contain;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-youtube' viewBox='0 0 16 16'%3E%3Cpath d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.130 1.544-.210 2.654-.260l.170-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/%3E%3C/svg%3E") 
        no-repeat center / contain;
}



/***TAMAÑO MARGEN BODI TOP cualquier ventana*/
.altura-body{
    margin-top: 7rem;
}
.altura-body-concejo{
    margin-top: 10rem;
}

/**BOTON FLOTANTE INICIO*/
.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/fondoBN2.png');
}

.img_fondo_two {/* solo se utiliza en concejo videos y videos CS**/
  min-height: 100vh;
  background-image: url('image/fondos/fondoBN2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/**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 */
}

nav.navbar.navbar-guinda {
    background-color: #820046!important;   /** COLOR DE NAVBAR ***/
    min-height: 100px;
}

.texto-blanco-fuerte {
    color: #ffffff !important;      /* Blanco total */
    text-shadow: 0 0 4px rgba(0,0,0,0.4); /* Hace que resalte más */
    font-weight: 700 !important;    /* Negrita más marcada */
}


/****************************************cambio forma flecha NAVBAR*********************************/
/* Elimina el caret de Bootstrap en los enlaces con la clase menu-indicador */
.navbar .circulo_menu::after {
    display: none; /* Oculta la flecha por defecto */
}

/* Agrega un círculo como pseudo-elemento después del texto del enlace con menu-indicador */
.navbar-nav .dropdown > .circulo_menu::after {
    content: ''; /* El contenido es un espacio vacío */
    display: inline-block;
    width: 10px; /* Tamaño del círculo */
    height: 10px;
    margin-left: 0.5em; /* Espacio entre el texto y el círculo */
    border-radius: 50%; /* Hace que el elemento sea un círculo */
    background-color: white; /* Color del círculo */
    vertical-align: middle; /* Alineación vertical */
    transition: transform 0.2s;
}

/* Opcional: Estilo al abrir el menú */
.navbar-nav .dropdown.show > .circulo_menu::after {
    background-color: #BE9C60; /* Color diferente al abrir */
}




/********************************************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: #801749!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;
    
      /* COLOR GUINDA con transparencia para permitir el blur */
    background: rgba(122, 0, 60, 0.85) !important;

    /* EFECTO BLUR */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}

    /* Animación suave blur */
    @keyframes slideup {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            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: 15px;
  /**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;

}


/***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;
  }


  */




/* =====================================================
   CARRUSEL
   ===================================================== */
:root {
  --navbar-height-desktop: 90px;
  --navbar-height-mobile: 130px;
}

.carousel-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent; /* evita blancos */
}

/* IMAGEN */
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 768px) {
  .carousel-image-wrapper {
    height: calc(100vh - var(--navbar-height-desktop));
  }
}

/* =====================================================
   MÓVILES
   ===================================================== */

@media (max-width: 767px) {
  .carousel-image-wrapper {
    height: calc(100vh - var(--navbar-height-mobile));
  }

  .carousel-img {
    object-fit: cover; /* 🔑 evita bordes blancos */
  }
}

/* =====================================================
   OVERLAY----sobreado del texto y dela imagen
   ===================================================== */

.carousel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 4vh;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0)
  );
}

/* TEXTO */
.overlay-content {
  text-align: center;
  max-width: 92%;
}

.overlay-title {
  margin-bottom: 0.4rem;
}

.overlay-content .btn {
  padding: 0.45rem 1.2rem;
  font-size: 0.85rem;
}

/************************OPCIONES MENUS DESPLEGABLES NAVBAR-------------NO BORRAR*************/

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

li {
  padding: 5px;
  position: relative;
}
/************************FIN OPCIONES MENUS DESPLEGABLES NAVBAR-------------NO BORRAR*************/



/**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;
}

.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;
}