body{
	text-align: center;
	margin: 0px;
}
/* Cambia el color cuando el cursor pasa sobre el botón */
button:hover {
  background-color: #FF6600; /* Nuevo color de fondo al hacer hover */
}
hr{
	background-color: orange;
}
header {
    position: relative;  /* crea un contexto para posicionar el logo */
}
button {
  background-color: #FF9900; /* Color de fondo inicial */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  padding: 10px 20px; /* Espaciado interno */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  transition: background-color 0.3s ease; /* Animación para el cambio de color */
}

.Barra{
	background-color: orange;
	padding: 20px;
	color: red;
}

.imagen_1
{
	background-image: url(Imagenes/bienvenida);
    width: 100%;
    height: 100%;
    object-fit: contain; /* muestra la imagen completa */

}
.Barra_abajo{
  background-color: orange;
  text-align: center;
  padding: 20px 0;
  color: black;
  font-weight: bold;
  justify-content: center;
}

.logo {
    position: absolute;  /* para colocarlo en una esquina fija del header */
    top: 5px;           /* distancia desde el borde superior */
    left: 60px;          /* distancia desde el borde izquierdo */
    height: 70px;        /* ajusta el tamaño del logo */
    width: auto;         /* mantiene la proporción */
}
/*imagenes menu*/
.button
{
	display: flex;
  	flex-wrap: wrap; /* Permite que los elementos se ajusten automáticamente en nuevas filas si es necesario */
  	justify-content: space-evenly;
}
.button{
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}
/* Sección general de la caja de comentarios*/
.contacto {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* Título */
.contacto h2 {
  text-align: center;
  margin-bottom: 20px;
  color: orange;
}

/* Fila de campos */
.fila {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  color: orange;
}

/* Cada campo del formulario */
.campo {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: orange;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

/* Campos de texto, select y textarea */
input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}


.galeria-eventos img{
	width: 250px;
	height: 400px;
}