/* RESET */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* BODY */
body{
  background-color:#0a0a0a;
  font-family:Arial, Helvetica, sans-serif;
}

/* CONTENEDOR */
.Contenedor{
  display:grid;

  grid-template-areas:
  'Header'
  'Menu'
  'Slider'
  'MissionVisionValues'
  'Content'
  'Table'
  'Footer';

  gap:30px;

  background-color:#0a0a0a;
}

/* HEADER */
.Header{
  grid-area:Header;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:30px 50px;

  background-color:#000;

  border-bottom:1px solid #222;

  color:white;
}

/* LOGO */
.logo{
  height:120px;

  border-radius:15px;

  transition:0.4s;
}

.logo:hover{
  transform:scale(1.05);
}

/* TITULO */
.center h1{
  font-size:50px;

  letter-spacing:5px;

  text-transform:uppercase;
}

.center h3{
  color:#b3b3b3;

  letter-spacing:3px;

  font-weight:normal;
}

/* REDES */
.redes{
  color:white;

  margin-left:15px;

  transition:0.3s;
}

.redes:hover{
  color:#999;

  transform:translateY(-3px);
}

/* MENU */
.Menu{
  grid-area:Menu;

  display:flex;
  justify-content:center;

  gap:25px;

  padding:20px;

  background-color:#111;
}

.Menu a{
  color:white;

  text-decoration:none;

  padding:12px 30px;

  border:1px solid #333;

  border-radius:12px;

  letter-spacing:2px;

  transition:0.4s;
}

.Menu a:hover{
  background-color:white;

  color:black;

  transform:scale(1.05);
}

/* SLIDESHOW */
#Slideshow{
  grid-area:Slider;

  max-width:1300px;

  margin:auto;

  padding:20px;
}

#gallery{
  border-radius:20px;

  overflow:hidden;

  box-shadow:0px 0px 25px rgba(255,255,255,0.08);
}

#gallery img{
  width:100%;

  display:block;
}

/* MISION / VISION / VALORES */
.MissionVisionValues{
  grid-area:MissionVisionValues;

  display:flex;

  justify-content:center;

  gap:25px;

  padding:80px 50px;

  background-color:#111;
}

.columna{
  background-color:#1a1a1a;

  padding:40px;

  border-radius:20px;

  width:33%;

  text-align:center;

  color:white;

  border:1px solid #222;

  transition:0.4s;
}

.columna:hover{
  transform:translateY(-10px);

  box-shadow:0px 0px 20px rgba(255,255,255,0.08);
}

.columna h2{
  margin-bottom:20px;

  letter-spacing:3px;

  text-transform:uppercase;
}

.columna p{
  color:#c2c2c2;

  line-height:1.8;
}

/* CONTENIDO */
.Content{
  grid-area:Content;

  padding:80px;

  color:white;

  text-align:center;
}

.Content h1{
  font-size:45px;

  margin-bottom:30px;

  letter-spacing:4px;
}

.Content p{
  max-width:900px;

  margin:auto;

  margin-bottom:20px;

  line-height:1.8;

  color:#cfcfcf;
}

/* TABLA */
.Table{
  grid-area:Table;

  padding:50px;

  display:flex;

  justify-content:center;
}

.Table table{
  width:80%;

  border-collapse:collapse;

  background-color:#111;

  color:white;

  border-radius:15px;

  overflow:hidden;
}

.Table th{
  background-color:white;

  color:black;

  padding:20px;

  letter-spacing:2px;
}

.Table td{
  padding:20px;

  text-align:center;

  border-top:1px solid #222;

  color:#d4d4d4;
}

.Table tr:hover{
  background-color:#1f1f1f;
}

/* FOOTER */
.Footer{
  grid-area:Footer;

  background-color:#000;

  color:white;

  padding:50px;

  text-align:center;
}

.Footer p{
  color:#bdbdbd;

  line-height:1.8;
}

/* RESPONSIVE */
@media screen and (max-width:800px){

  .Header{
    flex-direction:column;

    gap:20px;
  }

  .MissionVisionValues{
    flex-direction:column;
  }

  .columna{
    width:100%;
  }

  .Menu{
    flex-direction:column;

    align-items:center;
  }

  .Menu a{
    width:80%;
  }

}