*{box-sizing:border-box;margin:0px;padding:0px;} /* Estilo del documento general */

/* Configuración de la estructura general de la página, modelo 1 */
.Contenedor {
	display:grid;
	grid-template-areas:
		'Header'
		'Menu'
		'Dropdown'
		'Slider'
		'MissionVisionValues'
		'Content'
		'Table'
		'Footer';
	background-color:#fff6e7;
	gap:25px;
}

/* Estilo del encabezado  */
.Header {
	grid-area:Header;
	display: flex;
	margin:0px;
	padding:30px;
	font-family: "Georgia", cursive;
	justify-content: space-between;
      align-items: center;
	text-align:center;
	color:#a45910;
	background-color:indigo;
	background-image:url("Fondo_Puff%20_and_care.jpeg");
	border-bottom:0px solid;
	}

	.Header left {
		display:flex;
	}

    .logo {
      height: 200px;
      border-radius: 25px;
    }

	.Header center {
		display:flex;
	}

	.Header right {
    display:flex;
		}

	.redes {
	color: black ;
	transition: color 0.5s ease;
}

	.redes:hover {
		color: #f77234;
	}

/* Estilo del Menú */
.Menu {
	grid-area:Menu;
	margin-top:-25px;
	display:flex;
	justify-content:center;
	gap:25px;
	padding:5px;
	width:100%;
	background-color:#afbd70;
}
	/* Estilo de los elementos a dentro del menú */
	.Menu a { 
		text-align:center;
		color:white;
		text-decoration:none;
		background-color:#936d25;
		padding:10px;
		width:25%;
		border-radius:15px;
		}
	.Menu a:hover{
		background-color:#b1b1dc;
	}

	/* Estilo de menú vertical */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555555;
  color: white;
}

/* Estilo del Slider [Hero section]*/
/* Las imagenes deben tener tamaño 1200 de ancho por 400 de alto */
	/* Estilo del Slider [Hero section]*/
.HeroSection-Slideshow {
  grid-area:Slider;
  width: 80%; /* Ajustar tamaño */
  margin: 11%;
  border: 4px solid #f77234;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: 1000%; /* (Numero de imagenes + 1) * 100% */
  animation: slide 30s infinite ease-in-out; /*3sec por img + 1 de trans*/
}

.slide-track img {
  width: 80%; /* Debe coincidir con el hero section slider */
  height:600px;
}

/* Keyframes para un slider de 3 imagenes */
@keyframes slide {
  0%, 10 { transform: translateX(0); }
  12%, 20% { transform: translateX(-12%); }
  23%, 30% {	transform: translateX(-23%); }
  34%, 40% {	transform: translateX(-34%); }
  45%, 50% { transform: translateX(-45%); }
  56%, 60% { transform: translateX(-56%); }
  67%, 70% { transform: translateX(-67%); }
  78%, 80% { transform: translateX(-78%); }
  89%, 90% { transform: translateX(-89%); }
  95%, 100% { transform: translateX(-95%); }
}

	#Slideshow{
		grid-area:Slider;
		max-width:1500px;
		border:2px solid #f77234;
		margin:0 auto;
		padding:20px;
	}

	#gallery{
		max-width:1200px;
		border:thin black solid;
		margin:0 auto;
		background:skyblue;
		animation: fader 25s infinite ease-in-out;
	}

/* Estilo de la misión, visión y valores*/
	.MissionVisionValues{
		grid-area:MissionVisionValues;
		padding:5px;
		text-align:center;
		color:#a45910;
		background-color:#fff6e7;
	}
	
	.columna{
		float: left ;
		width:33%;
		border: 2px solid #afbd70;
		height: 180px;
		

	}
	.MissionVisionValues::after{
		content: "";
		display:table;
		clear:both;
	}

@media screen and (max-width:800px){
	.columna{
		width:200%;
	}
}

/* Estilo del contenido en general */
.Content {
	padding:50px;
	color:#b1b1dc;
	grid-area:Content;
	text-align: center;
	border: 2px solid #afbd70;
  height: 20px 20px;
	
}

/* Estilo de la tabla */
.Table {
	grid-area:Table;
	background-color:#b1b1dc; 
}

	.Table table th {color:#a45910;text-align:center;}
	.Table table td {color:#fff6e7;text-align:center;} 

/* Estilo del pie de página */
	.Footer {
		grid-area:Footer;
		height:100%;
		color: white;
		line-height:1.5;
		background-color:#a45910;
		}
		.Footer a{
		color: white;
		text-decoration:none;
		text-align: left ;
		}
		.columnafooter{
		float:left;
		width:50%;
		color: white;
		padding:30px;
	}
	.contenidofooter::after{
		content: "";
		display:table;
		clear:both;
	}

@media screen and (max-width:800px){
	.columnafooter{
		width:100%;
	}
}