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


.butonResultadoBusqueda button {
 
  
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);

  border-radius: 5px!important;
  border-color: white!important;
 color: white; 
                   margin-top: 5px;
                   margin-bottom: 5px;
                   margin-left: auto!important;
                   margin-right: auto!important;
                   text-align: center;

                   display: block;

}

.butonResultadoBusqueda div{
  
 
background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);

                    border: solid white;
                    border-radius: 5px;
                    color: white;
  
}

#margenN{margin-bottom: 0%;}

#filtrosE{
  font-family: 'Playfair Display', serif !important;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px; 
  color: rgb(250, 250, 250);
 background: #2e2d2d;
  border-radius: 5px;
  border: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;

}



#correoImg{
  max-width: 50px;
}

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


#xButton{
background-color: #ced4da;
}
.offcanvas-header{
  color: white;
 background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(150, 2, 2) 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; 
           

          }

 
          

      #mensajeBuscador{
         text-align: center;
     
          margin-top: 10px!important;
          margin-bottom: 10px!important;
        }

#margen{
  margin-bottom: 20%;
}      

#avisos{
  font-family: 'Playfair Display', serif !important;
  font-weight: bold;
  text-align: center!important;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 20px; 
  color: rgb(250, 250, 250);
  background: #2e2d2d;
  border-radius: 5px;
  border: none;
}

#botonFg button{
  
  background: #2e2d2d;         
}

#buttonContacto1{
  margin-left: auto;
}

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

#imagen1 {
  max-width: 100%;
  margin: 0 auto; /* Centra horizontalmente la imagen */
}

#imagen1 img {
  width: 100%; /* Establece el ancho de la imagen al 100% del contenedor */
  height: auto; /* Ajusta la altura automáticamente para mantener la relación de aspecto */
}








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





.container {
  display: flex;
  justify-content: center;
  
}

#noticiasContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr)!important; /* Crea tres columnas */
  gap: 20px; /* Espacio entre las cartas */
}

.scale-up-center {
  animation: scale-up-center 0.4s;
}

@keyframes scale-up-center {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Estilos iniciales del elemento */
.card {
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 10px;
  max-width: 300px;
  margin-bottom: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /* Esto crea una sombra difuminada */
}



.card h2 {
  font-family: 'Playfair Display', serif !important;
  font-weight: bold;
  text-align: center;
  font-size: 20px; 
  color: rgb(250, 250, 250);
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
  border-radius: 5px;
  border: none;
  
  width: 100%;
  height: 100px;

  /* 👇 Esto centra vertical y horizontalmente */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5px; /* para que no se pegue si es muy largo */
  text-align: center;
}


.card img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.card p {
  font-size: 13px;
  margin: 10px 0;
  line-height: 1.7; 
  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 */
}


.card:hover {
  
  animation: scale-up-center 0.4s;
 
  cursor: pointer;
  
}







.buscador,
.resultadoBusqueda{

  margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /* Esto crea una sombra difuminada */

    
}

#busqueda
{
  text-align: center;
}

.buscador input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    
    border-radius: 4px;
}












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


  #imagen1 {
    margin-top: 30px !important;
    max-width: 100%;
    margin: 0 auto; /* Centra horizontalmente la imagen */
  }
  
  #imagen1 img {
    width: 100%; /* Establece el ancho de la imagen al 100% del contenedor */
    height: auto; /* Ajusta la altura automáticamente para mantener la relación de aspecto */
  }

  
 /* Estilos para las cartas */


#noticiasContainer {
  display: block;
}

 .card {
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
 
}

.card h2 {
  font-family: 'Playfair Display', serif !important;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px; 
  color: rgb(250, 250, 250);
background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #2d033d 25%, #330a5ad5 75%, rgb(133, 2, 150) 100%);
border-radius: 5px;
  border: none;
}

.card img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.card p {
  
  margin-top: 10px;
  margin-top: 10px!important;
  margin-left: 10px!important;
  margin-bottom: 10px!important;
  font-size: 13px;
  line-height: 1.7; 
  color: #666666; /* Color gris más oscuro */
  font-weight: bold; /* Opcionalmente, usa '700' para mayor compatibilidad */
}





.buscador,
#resultadoBusqueda{

  margin-top: 10px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;

}

#margenN{margin-bottom: 80%;}

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

}

#botonFg{
  display: none;
  
}

#buttonContacto1{
  display: none;
 
}


#avisos{
  font-family: 'Playfair Display', serif !important;
  font-weight: bold;
  text-align: center!important;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 20px; 
  color: rgb(250, 250, 250);
  background: #2e2d2d;
  border-radius: 5px;
  border: none;
}



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