* { margin: 0; padding: 0; box-sizing: border-box; }
		body, html { height: 100%; font-family: Arial, sans-serif; }

		/* Cabeçalho */
		header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background: #E9F1FA;
		  color: #000;
		  padding: 10px 20px;
		  height: 60px;
		}
		header img { height: 40px; }
		header h1 { font-size: 18px; flex: 1; text-align: center; }
		header .right { display: flex; align-items: center; gap: 10px; }
		header button {
		  padding: 8px 12px;
		  background: #fff;
		  color: #007bff;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		  font-weight: bold;
		}

		/* Rodapé */
		footer {
		  background: #E9F1FA;
		  color: #000000;
		  text-align: center;
		  padding: 10px;
		  height: 40px;
		}

		/* Área central */
		main {
		  height: calc(100% - 100px); /* cabeçalho + rodapé */
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: #000;
		}

		/* Carrossel */
		.carousel {
		  width: 100%;
		  height: 100%;
		  position: relative;
		  overflow: hidden;
		}
		.carousel video {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  display: none;
		}
		.carousel video.active {
		  display: block;
		}
		.carousel-controls {
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
		  transform: translateY(-50%);
		  padding: 0 20px;
		}
		.carousel-controls button {
		  background: rgba(0,0,0,0.5);
		  color: #fff;
		  border: none;
		  padding: 10px;
		  cursor: pointer;
		  border-radius: 50%;
		}

		/* Modal */
		.modal {
		  display: none;
		  position: fixed;
		  top: 0; left: 0;
		  width: 100%; height: 100%;
		  background: rgba(0,0,0,0.6);
		  justify-content: center;
		  align-items: center;
		}
		.modal-content {
		  background: #fff;
		  padding: 20px;
		  border-radius: 8px;
		  width: 90%;
		  max-width: 350px;
		}
		.modal-content h2 { margin-bottom: 15px; text-align: center; }
		.modal-content input {
		  width: 100%;
		  padding: 10px;
		  margin: 8px 0;
		  border: 1px solid #ccc;
		  border-radius: 4px;
		}
		.modal-content button {
		  width: 100%;
		  padding: 10px;
		  background: #007bff;
		  color: #fff;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		}
		.close { float: right; cursor: pointer; font-size: 20px; }

		/* Responsividade */
		@media (max-width: 768px) {
		  header h1 { font-size: 14px; }
		  header img { height: 30px; }
		  .carousel-controls button { padding: 8px; }
		}
		@media (max-width: 480px) {
		  header { flex-direction: column; height: auto; }
		  header h1 { margin: 5px 0; }
		  main { height: calc(100% - 80px); }
		}