:root {
  /*----paleta de colores y fonts------*/      
  --primario:  #8d3d0e;
  --secundario: #A68932;
  --primarioclaro: #F27405; 
  --secundarioclaro: #D9BF41;
  --marron: #59402A;
  --blanco: #fff;
  --negro: #000;

  --font1: 'Anton', sans-serif;
  --font2: 'Poiret One', cursive;
  --font3: 'Rancho', cursive; ;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;

  margin: 0; /*-- probando para la pagina de tienda--*/
  padding: 0; /*-- probando para la pagina de tienda--*/

}
*, *:before, *:after {
  box-sizing: inherit;
}
















/*___________________________________________INICIO GLOBALES______________________________________________*/  
body {
  margin: 0;

  padding: 0; /*-- probando para la pagina de tienda--*/

  width: 100%; /*-- probando para la pagina de tienda--*/
  height: 100%; /*-- probando para la pagina de tienda--*/

  
  background-color: var(--primario);
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(89, 64, 42, 1));
  font-size: 1.5rem;
  line-height: 1.5;  
}
p {
  font-size: 1.7rem;
  font-family: var(--font2);
  color: var(--blanco);
  /*--line-height: 22px;--*/
}
a {
  text-decoration: none;
  font-size: 2rem;    
  color: var(--blanco);
}
img {
  max-width: 100%;
   
}
h1 {
  font-size: 2.5rem;
  color: var(--blanco);  
  font-family: var(--font2);  
  letter-spacing: 0.2rem;
}
h2 {
  text-align: center;
  font-family: var(--font2);
  font-size: 2.3rem;
  color: white;   
  padding: 0rem; 
  background-color: var(--secundario);
  letter-spacing: 0.2rem;

}
h3 {
  font-family: var(--font1);
  font-size: 2rem;
  font-weight: 400;
  color: white;   
  margin: 0;
}
h4 {
  font-family: var(--font2);
  font-size: 2.5rem; 
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blanco);
  margin: 2rem 0 0 
}
li {

  font-size: 1.7rem;
  font-family: var(--font2);
  color: var(--blanco);
  margin: 2rem;

}
.sombra {
  -webkit-box-shadow: 8px 8px 12px -3px rgba(0,0,0,0.54);
  -moz-box-shadow: 8px 8px 12px -3px rgba(0,0,0,0.54);
  box-shadow: 8px 8px 12px -3px rgba(0,0,0,0.54); 
}
.contenedor {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
}



















/*___________________________________________CSS PARA INDEX______________________________________________*/ 
/*----------INICIO CSS PARA INDEX:----------*/
#myVideo {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
.logoprincipal {
  width: 200px; height: 256px;
}
.content {
 display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  position: fixed;
  text-align: center;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--blanco);    
  padding: 20px;
  min-width: 100%;     
  min-height: 100%;
}
.frase {
  justify-self: center;
  font-size: 1.5rem;
  font-family: var(--font2);
}
.myBtn {
  margin:10px auto;
  width: 128px;
  font-size: 16px;
  padding: 10px;
  border: none;
  border-radius: 25px;
  background:  rgba(161, 70, 29, 0.5);
  color: var(--blanco); 
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font3);
}  
.myBtn:hover {   
  color: var(--secundarioclaro);  
  text-decoration: none;
}
/*----------FIN CSS PARA INDEX:----------*/






















/*___________________________________________CSS PARA HEADER______________________________________________*/
/*----------INICIO CSS PARA HEADER:------*/
.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0rem 10rem;
  
  background-image: url(/img/fondoheader2.jpg);
  background-repeat:no-repeat;
  background-position:100% 40%;
}
.logoinicial {
  margin: 0 auto; /*--para centrar el logo--*/
}
.logomuafro {
  /*--background-color: rgba(242, 116, 5, 0.7);--*/
  width: 100%; 
}
/*----------INICIO CSS PARA NAV:-------*/
.navbar {      
  display: flex;
  justify-content: center; 
  background-color: var(--primario);
  padding: 1rem 2rem 1rem 2rem;
  color: var(--blanco);
  font-size: 2rem;
  font-family: var(--font1);
  align-self: flex-end; 
  border-radius: 2rem 2rem 0 0; 
}
.navbar__enlace {
  color: var(--blanco);
  margin-right: 2rem;
}
.navbar__enlace:last-of-type {
  margin-right: 0;
}
.navbar__enlace:hover,
.navbar__enlace--activo {
  color: var(--primarioclaro);
}
/*--------FIN CSS PARA NAV:----------*/
























/*___________________________________________CSS PARA MAIN______________________________________________*/
/*----------INICIO CSS PARA MAIN:EXPOSICIONES--------*/
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}
.grid2 {
  text-align: center;
    background-color: var(--secundarioclaro);    
    /* display: grid; */
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 4rem;
    margin: 2rem;
}
.grid2 h4 {
  font-size: 2rem;

}
.grid2 p {
  font-size: 1.5rem;
  font-family: var(--font2);
  font-weight:bold;
  color: var(--marron);
}
.textosobresala {
  position: absolute;
  background-color: var(--primarioclaro);
  z-index: 1;
  writing-mode: vertical-lr;
  font-family: var(--font1);
  font-size: 3rem;
  padding: 2rem 1rem 4rem 0rem;
  border-radius: 0 0px 100px 0;
  text-transform: uppercase;
}
.imagenmuseo {
  filter: grayscale(100%);
  transition: all .2s ease-in-out;
}
.imagenmuseo:hover {
  filter: grayscale(0%);
}
.muafro3d {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);  
}
.informaciongrid {
  display: inline-grid; 
  grid-template-columns: auto auto;
  gap: 5rem;
  padding: 0 18rem;
  
}

.plantilla {
  width: 500px;
  margin: 2rem;
}

.grid3 {
  display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 2rem;
}
/*-------FIN CSS PARA MAIN:EXPOSICIONES----------*/





/*----------INICIO CSS PARA MAIN:ACTIVIDADES--------*/
.contenedor__card {
  max-width: 120rem; 
  display: grid;
  justify-content: center;  
  grid-template-columns: auto auto auto;
  gap: 4rem;
}
.card {
  /*--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);--*/
  transition: 0.3s;
  width: 100%;
  border-radius: 0.5rem;
  background-color: var(--primario);

}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(56, 4, 4, 0.822);
}
.card__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}
.texto__actividad {
  color: var(--blanco);
  margin: 3rem;    
}
/*-------FIN CSS PARA MAIN:ACTIVIDADES----------*/




/*----------INICIO CSS PARA MAIN: CONTACTO--------*/
.contenedor__contacto{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contenedor h3 {
  font-size: 2.8rem;
  margin-top: 0rem;
}
.container2 {
  display: grid;
  max-width: 60rem;
  border-radius: 1rem;
  background-color: var(--secundarioclaro);
  padding: 20px;
  margin: 4rem 0rem;
  position: relative;
  overflow: hidden;
  height: 720px;
  width: 75%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */      
}
  /* Then style the iframe to fit in the container div with full height and width */
.container_responsivo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/*-------FIN CSS PARA MAIN:CONTACTO----------*/








/*-------INICIO CSS PARA MAIN:EDUCACIÓN----------*/

.educación__textos {
  display: grid;
  gap: 4rem;
  
  margin-bottom: 5rem;
}
.educación__tarjeta1{
  border: solid 0.5rem var(--primarioclaro);
  padding: 1.5rem;
  border-radius: 2rem;
  justify-self: center;

}
.educación__tarjeta2 {   
  padding: 1.5rem;
  background-color: #59402A; 
  justify-self: center;
  align-items: center;
  border-radius: 2rem;
}
.educación__propuestas {
  background-color: var(--primario);
  display: grid;
  gap: 4rem;
  padding: 4rem 4rem;

}
.descargable {
  text-align: center;
}
.videocontenedor {
  text-align: center;
}

.fotos__educa {  
  display: grid;
    gap: 4rem;
    text-align: center;
    grid-template-columns: repeat(2, 1fr);
    margin: 0rem 10rem;

}

/*-------FIN CSS PARA MAIN:EDUCACIÓN----------*/






/*----------INICIO CSS PARA MAIN: TIENDA--------*/
.contenedor__tienda {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}
.tienda__card {
  background-color: var(--marron);
}
.contenedor__tienda .tienda__card {
  width: 330px;
  height: 360px;
  border-radius: 1rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 2rem;
  text-align: center;
  transition: all 0.25s;
}
.contenedor__tienda .tienda__card:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}
.contenedor__tienda .tienda__card img {
  width: 330px;
  height: 220px;
}
.contenedor__tienda .tienda__card h4{
  font-family: var(--font2);
  font-size: 2.0rem; 
  color: var(--blanco);
}
.contenedor__tienda .tienda__card p{
  padding: 0 1rem;
  font-size: 1.5rem;
}
.contenedor__tienda .tienda__card a {
  text-decoration: none;
  color: var(--secundarioclaro);
  background-color: var(--primario);
}
.contenedor__video__tienda {
  display: grid;
  width: 100rem;
  grid-template-columns: auto auto;
  margin: 0 4rem 4rem 4rem;
  justify-content: center;  
}
.contenedor__video__tienda h3 {  
  margin: 4rem;  
}
.texto__de__tienda{
  font-size: 1.5rem;
  padding: 1rem 2rem;
  text-align: left;
  color: var(--blanco)
}

/*-------FIN CSS PARA MAIN:TIENDA----------*/





/*-------INICIO CSS PARA MAIN:MUSEO----------*/
.museo__textos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 4rem 0rem;
}
.museo__tarjeta {  
  justify-self: center; 
  
}
.museo__auspiciadores {
  background-color: var(--blanco);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}
.logo01 {
  justify-self: center;
}
.creadores_y_gestores {
  text-align: center;
  font-size: 3rem;
  margin-top: 4rem;
}
/*-------FIN CSS PARA MAIN:MUSEO----------*/





/*-------INICIO CSS PARA MAIN:INVESTIGACIONES----------*/

.contenedor__investigaciones__A {
  display: grid;
  grid-template-columns: auto auto auto; 
  grid-template-rows: auto auto;
  grid-gap: 20px;
  background-color: var(--primario);
  padding: 2rem 2rem;
}

.contenedor__investigaciones__B {
  display: grid;
  grid-template-columns: auto auto auto; 
  grid-template-rows: auto auto;
  grid-gap: 20px;
  background-color: var(--marron);
  padding: 2rem 2rem;
}

.contenedor__investigaciones__A > div {
  background-color: var(--marron);
  text-align: center;
  padding: 1.5rem 1.5rem;
  font-size: 30px;
}

.contenedor__investigaciones__B > div {
  background-color: var(--primario);
  text-align: center;
  padding: 1.5rem 1.5rem;
  font-size: 30px;
}

.investigaciones__titulo {
  grid-column: 1 / 5;
}
.investigaciones__titulo h3 {
  font-size: 2.2rem;
  text-align: left;
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
}
.investigaciones__contenido {
  grid-column: 1 / 4;
  font-size: 1.7rem;  
  font-family: var(--font2);
  color: var(--blanco);
}

.investigaciones__contenido li {
  text-align: left;
}
.investigaciones__imagen {
  grid-column: 4 / 5;
}

.investigaciones__autor {
  font-size: 2rem;
  color: var(--blanco);
  text-align: right;
  font-family:Arial, Helvetica, sans-serif;
}


/*-------FIN CSS PARA MAIN:INVESTIGACIONES----------*/




/*-------INICIO CSS PARA MAIN:LEGAL----------*/

.info__legal {
  max-width: 90rem;
  margin: 4rem;

}

/*-------FIN CSS PARA MAIN:LEGAL----------*/

























/*___________________________________________CSS PARA FOOTER______________________________________________*/
/*----------inicio CSS PARA footer:----------*/
.footer {    
  background-color: var(--secundario);
  padding: 1rem 0;   
}
/*----------inicio iconos redes sociales----------*/
.social{
  /*las imágenes usadas tienen width de 48px*/
  width:48px;                        
  position:fixed;
  top:50px;
  right:0;
/* Extra centrado vertical*/
  /*border:1px solid #000;*/
  top:50%;
  height:205px;
  /*para poner height 192 deberíamos haber indicado en el reset de estilos font-size:0;*/
  margin-top:-100px;
}
/*----------fin iconos redes sociales----------*/ 

.contenedor__footer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  margin: auto;
  padding: 3rem 0rem;
  background-color: var(--secundario);
}
.footer__logo,
.footer__info,
.footer__creador {
  width: 333px;
}
.footer__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primarioclaro);

}
.footer__logo .logomuafro {
  background-color: transparent;
  margin: 0rem;
  width: 42%;
}
.footer__info,
.footer__creador {   
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--secundarioclaro);
  padding: 4rem 4rem;


}
.footer__info a {
  font-size: 1.5rem;
  color: var(--marron);
}
.footer__creador a {
  color: var(--marron);
  font-size: 1.5rem;
}
.footer__info h3{
  font-size: 1.5rem;
}
.footer__creador h3 {
  font-size: 1.5rem;  
}
.footer__creador p {
  color: var(--marron);
  font-family: var(--font1);
  font-size: 1.2rem;

}
/*----------FIN CSS PARA footer:----------*/





































/*_______________________________INICIO MEDIA QUERY  For mobile phones:_____________________________*/

@media (max-width: 480px) {
       
  /*----------INICIO INDEX:----------*/
    h1 {  
      margin: 0.6rem;
      font-size: 1.5rem;
      letter-spacing: 0.1rem;
    }
    .logoprincipal {
      width: 150px; height: 192px;    
    }
    .frase {
      justify-self: center;  
      display: flex;
      margin: .7rem;
      font-size: 1rem;
      flex-direction: column;      
    }

    li {
      font-size: 1.7rem;
      font-family: var(--font2);
      color: var(--blanco);
      margin: 2rem;
    }
    
  /*---------FIN INDEX:----------*/








  /*----------INICIO HEADER---------*/  
    
    .header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 0rem 0rem;
    }
    .logoinicial {
      display: grid;
      align-items: center;
      background-color: rgba(89, 64, 42, 0.8);
      padding: 2rem;
    }
    .logomuafro {
      background-color: rgba(242, 116, 5, 0);
      width: auto;       
    }
    .vacio {
      display: none;
    }        
    .navbar {    
      display: flex;
      flex-direction:column;
      align-items: center;
      padding: 1rem 2rem 1rem 2rem;
      border-radius: 0px;    
    }
    .navbar__enlace {
      color: var(--blanco);
      margin-right: 0;
      margin-bottom: 1.5rem;
      font-size: 2.0rem;
    }
    .navbar__enlace:last-of-type {
      margin-bottom: 0;
    }
    h2 {
      font-size: 1.5rem;
    }
  /*--------FIN HEADER Y NAV BAR----------*/




    
  .contenedor {
    max-width: 120rem;
    margin: 0px auto;

  }





  /*----------INICIO MAIN EXPOSICIONES---------*/
    .grid,    
    .textos-e-imagenes {
      display: grid;
      grid-template-columns: auto;    
      gap: 2rem;
    }

    .grid2 {
      display: grid;
      grid-template-columns: auto;    
      gap: 2rem;
      padding: 0rem 0rem 4rem 0rem;
      margin: 2rem 0rem;
    }
    


    .informaciongrid {        
    grid-template-columns: repeat(1, 1fr); 
    padding: 2rem 6rem;
    gap: 3rem; 
    text-align: justify;
    }

    .muafro3d {      
      width: 375px;
      display: grid;
      gap: 0rem;
      grid-template-columns: repeat(1, 1fr);
      margin-top: 2rem;
      margin-bottom: 0rem;
    }     
    .grid3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(0, 1fr);
    margin: 2rem;
     }

    .plantilla {
      width: 350px;
      margin: auto;
   }
  /*----------FIN MAIN EXPOSICIONES----------*/










/*-------INICIO CSS PARA MAIN:EDUCACIÓN----------*/
.educación__textos {
  display: grid;
  gap: 4rem;
  padding: 4rem 4rem;  
  margin-bottom: 2rem;
}
.educación__tarjeta { 
  padding: 1rem;
  background-color: #59402A; 
  justify-self: center;
  text-align: center;
  
}
.educación__propuestas {
  background-color:var(--primario);
  display: grid;
  gap: 4rem;
  padding: 4rem 2rem;

}
.fotos__educa {  
  grid-template-columns: repeat(1, 1fr);
  margin: 0rem 0rem;
}
/*-------FIN CSS PARA MAIN:EDUCACIÓN----------*/



/*----------INICIO MAIN ACTIVIDADES----------*/

  .contenedor__card { 
    display: grid;
    margin: 4rem;
    grid-template-columns: auto;
   gap: 2rem;
  }

/*----------FIN MAIN ACTIVIDADES----------*/





  /*----------INICIO MAIN CONTACTO----------*/
    .contenedor__contacto{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
    }
    .container1 {
      display: flex;
      width: 100%;
      height: 33rem;    
      background-color: var(--marron);
      padding: 32px;  
      
    }
    .container2 {

      display: grid;
      max-width: auto;  
      border-radius: 1rem;  
      background-color: var(--secundarioclaro);
      height: 720px;
      padding: 20px;
      margin: 2rem 4rem;


    }
    .contenedor h3 {    
      font-size: 2.3rem;;  
    }  
  /*----------FIN MAIN CONTACTO----------*/





  

  /*----------INICIO MAIN INVESTIGACIONES----------*/


  .grid-container {    
    padding: 4rem 1rem;
  }

  .investigaciones__titulo {
    grid-column: 1 / 5;
  }
  
  .investigaciones__contenido {
    grid-column: 1 / 5;
  }
  
  .investigaciones__imagen {
    grid-column: 1 / 5;
  }

  .contenedor__investigaciones__A {
    grid-gap: 0px;
    background-color: var(--primario);
    padding: 4rem 1rem;
  }
  
  .contenedor__investigaciones__B {    
    grid-gap: 0px;
    background-color: var(--marron);
    padding: 4rem 1rem;
  }

  /*----------FIN MAIN INVESTIGACIONES----------*/







  /*-------INICIO MAIN MUSEO----------*/
  .museo__textos {
    grid-template-columns: 1fr;  
    padding: 3rem;
    gap: 2rem;
  }
  .museo__tarjeta {  
    justify-self: center;
  }
  .museo__auspiciadores {
    grid-template-columns: 1fr 1fr;
    padding: 3rem;
  }
  .logo01 {
    justify-self: center;
  }
  .creadores_y_gestores {
    font-size: 2.6rem;
    color: var(--marron);
    background-color: var(--secundarioclaro);
  }
  /*-------FIN MAIN MUSEO----------*/





  /*-------INICIO MAIN TIENDA----------*/
  .contenedor__tienda {
    grid-template-columns: auto;
    margin: 1rem 2rem;    
  }
  .tienda__card {
    grid-template-columns: auto;
  }
  .contenedor__video__tienda {
    display: grid;
    grid-template-columns: auto;
    width: 70%;
    margin: 4rem;
  }
  /*-------FIN MAIN TIENDA----------*/






  /*----------INICIO FOOTER:----------*/
  .contenedor__footer {    
    align-items: center;
    flex-direction: column;
    justify-content: center;
    display: flex;
    width: auto;  
  }
  .footer__logo {
    width: 70%;
  }  
  .footer__info,
  .footer__creador {
    align-items: center;
    padding: 4rem 4rem;
    width: 70%;
  }
  .footer {    
    background-color: var(--secundario);
    padding: 3rem 0;     
  }
  .footer__info,
  .footer__creador h3 {
    font-size: 1rem;
    text-align: center;
    line-height: 2rem;
  }  
  .footer__creador p {
    margin-top: 3rem;
    color: var(--marron);
    font-size: 1.5rem;
    text-align: center;
    line-height: 2rem;

  }
  /*----------FIN FOOTER:----------*/
}


/*______________________________FIN MEDIA QUERY INDEX For mobile phones:_________________________________*/




  




