@font-face {
  font-family: 'titulo-artes';
  src: url('fonts/Allison/Allison-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'maquina';
  src: url('fonts/DM_Serif_Text/DMSerifText-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'st Marie';
  src: url('fonts/st_marie/StMarie-Thin.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BallPointScratch';
  src: url('fonts/BallpointScratch/BallpointScratch.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #E5E4E2;
}

h1 {
  font-family: 'titulo-artes', sans-serif;
  font-size: 70px;
  text-align: center;
}

.contenedor-menu {
  display: flex;
  font-family: 'BallPointScratch', sans-serif;
  padding: 1rem;
}

.contenedor-menu .columna-1 {
}

.contenedor-menu .columna-1 .img-firma {
    all: unset;
    width: 80%;
  }

.contenedor-menu .columna-2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-left: auto;

}

.contenedor-menu .columna-2 .c1{
  font-size: 150%;
}

.contenedor-menu .columna-2 .c1 .img-libre-1 {
  width: 20%;
}

.contenedor-menu .columna-2 .c2 {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contenedor-menu .columna-2 .c2 .img-qr{
   all: unset;
   width: 20%;

  }

  .contenedor-1 .c2 .img-libre-3 {
    all: unset;
    width: 40%;
    position: absolute;
    top: -300px;
    
  }

  .contenedor-1 .c2 .img-libre-4 {
    all: unset;
    width: 40%;
    position: absolute;
    top: 800px;
    left: 900px;
  }




/* ====== MÓVIL ====== */
@media (max-width: 768px) {

  header {
    padding: 1rem;
  }
 
  .contenedor-menu {
  all: unset;
   display: flex;
   flex-direction: column; /*Asi todos los DIVS, estan en columnas (sin esta opcion, default es ROW)*/
   font-family: 'BallPointScratch', sans-serif;
  }

  .contenedor-menu .columna-1 {
    all: unset;
    width: 100%;  
    display: flex;           /* <-- necesario para usar justify-content */
    justify-content: center; /* <-- centra horizontalmente */
  }

  .contenedor-menu .columna-1 .img-firma {
    all: unset;
    width: 60%;
    align-items: center;
  }

  .contenedor-menu .columna-2 {
    all: unset;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contenedor-menu .columna-2 .c1{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
  }

  .contenedor-menu .columna-2 .c1 .img-libre-1 {
    width: 100%;
  }

  .contenedor-menu .columna-2 .c2{
   all: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  }

  .contenedor-menu .columna-2 .c2 .img-qr{
   all: unset;
   width: 30%;
  }

  .contenedor-1{
   all: unset;
   display: flex;
   flex-direction: column;
  }

  .contenedor-1 .c1{
   all: unset;
  }

  .contenedor-1 .c2{
   all: unset;
   display: flex;
   align-items: center;
   position: relative;
  }

  .contenedor-1 .c1 .img-libre-3 {
    all: unset;
    width: 70%;
    z-index: 1;
    transform: rotate(-5deg);
  }

  .contenedor-1 .c2 .img-libre-4 {
    all: unset;
    width: 60%;
    margin-left: auto;
    position: relative;
    top: -50px;
    z-index: 2;         /* se superpone encima de la img-3 */
  }
/*
Para que z-index funcione, el elemento debe tener posición distinta a static:
position: relative;  
position: absolute;
position: fixed;
position: sticky;
*/


}