@charset "utf-8";
/* CSS Document */
body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
article {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Centra horizontalmente */
}
h2 {
  font-family: 'Lora', serif;
}
/* NAV */
nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
}
nav li { flex-grow: 1; }
nav a {
	display: block;
	padding: 1em;
	text-align: center;
	text-decoration: none;
	color: #000000;
	border: solid 1px #424242;
	transition: all 0.5s;
	text-transform: uppercase;
}
nav a:hover {
	background-color:#4fc3f7; }
/* SECTION con GRID */
section {
  display: grid;
  margin-bottom:0.1em;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
  padding: 20px;
}

/* Videos e iframe responsive */
video,
.video-container iframe,
.contenedor-iframe iframe {
  width: 100%;
  height: auto;
}

/* Contenedor responsive 16:9 */
.video-container,
.contenedor-iframe {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-container iframe,
.contenedor-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 15px;
  background-color: #222;
  color: white;
}

@media (orientation: landscape) {
section {
	grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
}
#main {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
}
nav ul {
	flex-direction: row;
}
a {
	margin-right:0.2em;
}
}

@media (orientation: portrait) {
section {
	grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}
#main {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
}
nav ul {
	flex-direction: column;
}
nav a {
	margin-bottom:0.2em;
}
}