/* Estilo para el cuerpo del documento */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: url("https://firebasestorage.googleapis.com/v0/b/teamx-13747.firebasestorage.app/o/4k-ultra-hd-galaxy-neon-clouds-tvdk33tom2ps3q3o.jpg?alt=media&token=50eaf2fc-abf4-4de3-8299-7ffeab4dd295") no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(15px) brightness(0.8);
  z-index: -1;
}

/* Contenedor de noticia completa con fondo blanco */
.noticia-completa {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
         
      
          h1 {
            font-family: 'Playfair Display', serif!important;
            color: rgb(134, 8, 165)!important;
            font-size: 35px!important;
            text-align: center;
            margin-bottom: 35px!important;
            margin-left: 10px;
            margin-right: 10px;
            
          }
      
         

          #imgN {
            display: block;
            margin: 0 auto;
            max-width: 90%;
            max-height: 50%;
            border-radius: 10px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /* Esto crea una sombra difuminada */
            margin-bottom: 10px;
            margin-top: 10px;
        }

        #imgN2 {
          display: block;
          margin: 0 auto;
          max-width: 90%;
          max-height: 50%;
          border-radius: 10px;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /* Esto crea una sombra difuminada */
          margin-bottom: 10px;
          margin-top: 10px;
      }

      #imgN3 {
        display: block;
        margin: 0 auto;
        max-width: 90%;
        max-height: 50%;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /* Esto crea una sombra difuminada */
        margin-bottom: 10px;
        margin-top: 10px;
    }
        
          

        

          
          #videoYoutube {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            margin-bottom: 10px;
            margin-top: 10px;
            max-width: 100%;
            height: 512px;
            width: 512px;
            border-radius: 10px;
            overflow: hidden; /* Para ocultar las esquinas del video si el borde es redondeado */
          }
          
          #videoYoutube iframe {
            width: 100%; /* Asegura que el video ocupe todo el ancho del contenedor */
            height: 100%; /* Ajusta la altura proporcionalmente */
            border: none; /* Elimina el borde predeterminado del iframe */
          }
          p{
            margin-left: 50px;
            margin-right: 50px;
          }


          #correoImg{
            max-width: 50px;
          }
          
            #correo{
              color: #f8f9fa;
              margin-left: auto!important;
              margin-right: auto!important;
              max-width: 250px;
            }


          
        #compartirBtn {
          background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
 color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 5%;
            
        }

        #fechaHora{
          color: black;
          font-size: 15px;
          margin-top: 15px;
          margin-bottom: 25px;
          text-align: center!important;

        }

        #enlace{
          color: black;
          font-size: 15px;
          margin-top: 15px;
          margin-bottom: 25px;
          text-align: center!important;

        }

        #editor{
          color: black;
          font-size: 15px;
          margin-top: 15px;
          margin-bottom: 25px;
          text-align: center!important;
        }

        #fuente{
          color: black;
          font-size: 15px;
          margin-top: 15px;
          margin-bottom: 25px;
          text-align: center!important;
        }

        #botonFg button{
  
          background: #2e2d2d;         
        }
        
        #buttonContacto1{
          margin-left: auto;
        }
        
        #buttonContacto1 button{
          background: #2e2d2d;margin-right: 5px;
         
        }


#margen{
            margin-bottom: 100px;
          }
          #xButton{
            background-color: #ced4da;
            }
            .offcanvas-header{
              color: white;
             background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
}
            
            
            
                      /* Personaliza la barra de navegación */
                      #custom-navbar.navbar {
                       background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
                         padding: 0;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background-attachment: fixed;
                      }
                      
                      #logoBarra, #Barra {
                        border-radius: 30%;
                       
                      }
                      
                      #BarraS{
                        display: none;
                        background-color: rgb(134, 8, 165);
                        border-radius: 30%;
                        padding: 0; 
                       
            
                      }
            
             
                      
            

                      .footer {
 
                        position: relative;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        font-size: 15px;
                        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
}
          .social-icons {
            display: flex;
            justify-content: center;
            margin: 0 10px;
           
          }
          
          .social-icon img {
            height: 50px;
            width: 50px;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 30%;
            
          }
          
          .piePagina{
            color: white!important;
            text-align: center;
            font-size: 15px;
            margin-top: 5px;
          
          }


          
/* Sombreado de la barra de navegación*/
.shadow-bottom {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.548); 
}

/* Estilo para el sombreado del pie de página */
.shadow-top {
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.548); 
}

#contenido-noticia {
  margin-top: 6rem; /* Aumenta de 3rem a 6rem */
  padding-top: 2rem;
}


.noticia-completa {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header-noticia h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.meta-info {
  border-left: 3px solid rgb(134, 8, 165)!important;
  padding-left: 1rem;
  margin: 1rem 0;
}

.instagram-embed {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.gallery img {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lead {
  font-size: 1.25rem;
  color: #444;
}

/* Ajustes para embeds de Instagram */
.instagram-embed iframe {
  min-height: 700px; /* Altura mínima para Reels */
  background: transparent;
  border: none;
  margin: 1rem auto;
}

/* Aumentar tamaño del badge de categoría */
.header-noticia .badge.bg-secondary {
  font-size: 1.25rem;
  padding: 0.6em 1.2em;
  border-radius: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  vertical-align: middle;
}

.badge.bg-secondary {
  background-color: #2e2d2d !important;
  /* Opcional: ajustar color de texto si es necesario */
  color: #ffffff;
}
/* Fuente para el título de la noticia */
.noticia-completa h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700; /* Peso bold */
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Encabezado de la noticia */
.noticia-completa .header-noticia {
  border-bottom: 2px solid #eee;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
}




/* Imagen principal */
.noticia-completa .imagen-principal {
  margin: 2rem 0;
  position: relative;
}

.noticia-completa .imagen-principal img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.noticia-completa .imagen-principal img:hover {
  transform: scale(1.01);
}

/* descripcion corta */
.noticia-completa .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 2rem 0;
  color: #666666; /* Color gris más oscuro */
  font-weight: bold; /* Opcionalmente, usa '700' para mayor compatibilidad */
  text-transform: uppercase; /* Convierte todo el texto a mayúsculas */
}

.tipo-noticia,
.header-noticia .badge,
.badge.bg-secondary {
  font-family: 'Playfair Display', serif !important;
}



/* Media query para pantallas de 768px o menos */
@media screen and (max-width: 768px) {

  .noticia-completa h1 {
    font-size: 1.3em !important;
}
  .instagram-embed iframe {
    min-height: 600px;
    width: 100%!important;
}
  p{
    margin-left: 10px;
    margin-right: 10px;
  }

  #imgN {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    max-height: 50%;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}


#imgN2 {
  display: block;
  margin: 0 auto;
  max-width: 90%;
  max-height: 50%;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}


#imgN3 {
  display: block;
  margin: 0 auto;
  max-width: 90%;
  max-height: 50%;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}


 





#BarraS{
  display: block;
  background-color: rgb(134, 8, 165);
  border-radius: 30%;
  padding: 0; 
 

}

#botonFg{
  display: none;
  
}

#buttonContacto1{
  display: none;
 
}











}
/* Media query para pantallas de 576px o menos */
@media screen and (max-width: 576px) {
 
}