/* Estilo solo para el header dividido */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: black;
  color: white;
}
.header-right a {
  color: white;
  text-decoration: none;
  margin-left: 15px;
  font-size: 1rem;
}
.header-right a:hover {
  text-decoration: underline;
}

nav {
  background-color: black;
  width: 100%;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: center;
}

.menu > li {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.menu > li:hover{
  background-color: black;
}

.menu > li > a {
  display: block;
  padding: 15px 25px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.menu > li > a:hover {
  background-color: #444;
}

/* Submenu */
.submenu {
  list-style: none;
  display: none;
  position: absolute;
  background-color: #333;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 1000;
  width: 100%;
}

.submenu > li{
  display: flex;
  justify-content: center;
}

.submenu li a {
  padding: 12px 20px;
  display: block;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.submenu li a:hover {
  background-color: #555;
}

.menu li:hover .submenu {
  display: block;
}

iframe{
  width: 100%;
  height: 600px;
  border: none;
}

.iframe-contenedor {
padding: 20px;
box-sizing: border-box;
}