#contenedor_banner_TramitesYServicios {
  display: flex;
  align-items: center;
  justify-content: center; /* Centra verticalmente el contenido */
  margin-top: 110px;
  padding: 0px 50px;
  background-image: url(../imagenes/TramitesYServicios.jpg);
  width: auto;
  height: 60vh; /* Toma el 100% del alto de la ventana del navegador */
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
#contenedor_banner_TramitesYServicios::before {
  content: "";
  background: linear-gradient(84deg, #00000086 42%, #096f9eb4 100%);
  position: absolute;
  width: 100%;
  height: 60vh;
  left: 0;
  top: 0;
  z-index: 3; /* Coloca el degradado detrás del video */
}
#contenedor_banner_TramitesYServicios .descripcion-apartado {
  background-color: #00000027;
  border-radius: 10px;
  padding: 20px;
  z-index: 4;
  text-align: center; /* Añade alineación centrada al texto */
  color: #fff; /* Color del texto (blanco) */
  font-size: 25px; /* Tamaño de fuente */
  margin-top: 20px; /* Espacio superior */
  font-weight: bold; /* Texto en negrita */
  letter-spacing: 1px;
}

/* Estilos para el encabezado */
#contenedor_banner_TramitesYServicios .encabezado-descripcion h1 {
  text-align: center;
  color: #62fff1;
  font-family: "Helvetica", Sans-serif;
  font-size: 56px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3.3px;
}

/* Estilos para el párrafo */
#contenedor_banner_TramitesYServicios .descripcion-apartado p {
  font-size: 25px; /* Tamaño de fuente más grande */
  color: #fff; /* Color del texto (blanco) */
  text-align: center; /* Alineación centrada */
  margin-top: 20px; /* Espacio superior mayor */
  font-weight: bold; /* Texto en negrita */
  letter-spacing: 1px;
}

/* Estilos para el contenedor de las áreas */
.contenedor-areas-Ayuntamiento {
  padding: 80px;
}
/* Estilos para el contenedor de las áreas */
.contenedor-Areas {
  display: grid;
  grid-template-columns: repeat(
    4,
    1fr
  ); /* Esto crea 4 columnas igualmente espaciadas */
  gap: 20px; /* Espacio entre elementos */
}

/* Estilos para cada área */
.AreasAyuntamiento {
  width: 100%; /* Opcional: ajusta el ancho de cada área según tus necesidades */
  height: 225px; /* Ajusta la altura al 100% del contenedor */
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.5s;
}

/* Estilo para aplicar el zoom al pasar el cursor */
.AreasAyuntamiento:hover {
  transform: scale(1.1); /* Escala el contenedor al 110% del tamaño original */
}
.AreasAyuntamiento::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent; /* Fondo transparente por defecto */
  opacity: 0; /* Inicialmente transparente */
  z-index: -1;
}

/* Estilos para el texto en cada área */
.AreasAyuntamiento button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-size: 19px;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.521);
  font-weight: 600;
}

/* Estilos para el contenedor de las áreas */
.contenedor-Areas .fila {
  display: flex;
  justify-content: space-evenly;
}
form {
  display: grid;
  padding: 20px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Establece colores de fondo diferentes para cada clase de color */
.color-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 71, 27, 0.541); /* Color 1 con fondo transparente */
  z-index: 2; /* Asegura que esté por encima de la imagen */
}

.color-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2414058a; /* Color 2 */
  z-index: 2; /* Asegura que esté por encima de la imagen */
}

.color-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a3108b8a; /* Color 3 */
  z-index: 2; /* Asegura que esté por encima de la imagen */
}

.color-4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #360a9e88; /* Color 4 */
  z-index: 2; /* Asegura que esté por encima de la imagen */
}

.AreasAyuntamiento::before {
  opacity: 1;
}
/*----------------------------------*/

/*Dispositivos moviles*/
@media screen and (max-width: 768px) {
  #contenedor_banner_TramitesYServicios .encabezado-descripcion h1 {
    font-size: 47px;
  }
  #contenedor_banner_TramitesYServicios .descripcion-apartado p {
    font-size: 20px;
  }
  .contenedor-Areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .contenedor-areas-Ayuntamiento {
    padding: 40px;
  }
}
/*----------------------------------*/

@media screen and (max-width: 480px) {
  #contenedor_banner_TramitesYServicios {
    padding: 0px 23px 0px 10px;
  }

  #contenedor_banner_TramitesYServicios .encabezado-descripcion h1 {
    font-size: 40px;
  }
  #contenedor_banner_TramitesYServicios .descripcion-apartado p {
    font-size: 17px;
  }
  .contenedor-Areas {
    grid-template-columns: repeat(2, 1fr);
  }
  .contenedor-areas-Ayuntamiento {
    padding: 20px;
  }
}
/*----------------------------------*/
@media screen and (max-width: 390px) {
  #contenedor_banner_TramitesYServicios .encabezado-descripcion h1 {
    font-size: 41px;
  }
  #contenedor_banner_TramitesYServicios .descripcion-apartado p {
    font-size: 15px;
    text-align: justify;
  }
  #contenedor_banner_TramitesYServicios {
    padding: 0px 10px 0px 10px;
  }
  .contenedor-Areas {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .contenedor-areas-Ayuntamiento {
    padding: 30px;
  }
}