/*Fuentes*/

@import url(https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Paytone+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=DynaPuff:wght@700&display=swap);

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

body {
  background-color: #6fbac2;
}

/*Formato de cabecera*/
.cabecera {
  height: 3vh;
  background-color: #6fbac2;
  color: #732240;
  position: fixed;
  width: 100%;
  top: 0;
  align-items: center;
  align-content: center;
  text-align: center;
  font-weight: bold;
}

/* Contenedor principal */
.contenido {
  display: flex;
  flex-direction: row;
}

/*Barra de navegación*/

.navbar {
  width: 12%;
  align-self: flex-start;
}
.botones {
  position: fixed;
  width: 5vw;
}
.botonera {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: left;
  align-items: flex-start;
  width: 5vw;
}

.button {
  position: relative;
  background: none;
  border: solid 0.2vw #8c0327;
  transition: linear 250ms;
  width: 12vw;
  height: 7.7vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vmin;
  font-family: "paytone one", sans-serif;
}

.button:is(:hover, :focus) {
  color: #5fa4ac;
}

.button::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  background-color: #d4315d;
  transform-origin: left;
  transform: scaleX(0);
  transition: linear 250ms;
}

.button:is(:hover, :focus)::after {
  transform: scale(1);
}

/*Contenedor secciones*/

.contenedorgrande {
  width: 88%;
  align-self: flex-end;
}

.secciones {
  display: flex;
  flex-direction: column;
}

/* Clase genérica */
.seccion {
  width: 100%;
  height: 100vh;
  padding: 0;
}

/*Presentacion*/

.presentacion {
  background-color: #f277a4;
  /*centrar el título*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.titulo {
  font-family: "Dynapuff", cursive;
}

/* Seteamos las estilos generales  */

.section {
  /* Defino el tamaño de las secciones */
  width: 100%;
  height: 85vh;
}

/* ---------------- Aca seteamos las propiedades del nombre con imagen de fondo en movimiento ------------------- */

.main-name {
  /* Centramos el contenido de la sección y determinamos el color de fondo */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.name {
  /* seteamos las propiedades del texto */
  font-family: "Dynapuff", cursive;
  font-size: 10vmax;
  text-align: center;
  color: rgba(255, 255, 255);
}

.span-main-name {
  /* Establecemos la iamgen de fondo del texto */
  display: block;
  background: url("../img/fondotexto1.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;

  -webkit-text-fill-color: transparent;

  /* Establecemos la animación */
  animation: fire 50s linear infinite;
  -webkit-animation: fire 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes fire {
  /* Definimos el paso a paso de la animación */
  0% {
    background-position: left 0 top 10px;
  }
  15% {
    background-position: left 500px top 5px;
  }
  30% {
    background-position: left 1000px top 0;
  }
  70% {
    background-position: left 2000px top -5px;
  }
  100% {
    background-position: left 3000px top 10px;
  }
}

/*Seccion 1: conociendome*/

.conociendome {
  background-color: #d9436b;
}

.seccionconociendome {
  background-color: #c97a8f;
  font-size: 2.5vmin;
  line-height: 15vmin;
  /*background-image: url("../img/fondoconociendome.jpg");*/
  background-size: cover;
}

.subtitulo {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 6vmin;
  color: #2c717a;
  letter-spacing: 0.25em;
  background-color: transparent;
  text-align: center;
  text-shadow: 2px 2px 2px silver;
  padding-top: 2.5%;
}

.cuestionario {
  padding-bottom: 4vh;
}

.izq {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: bold;
  background-color: #33a59b;
  margin-left: 5%;
  padding-left: 5%;
  margin-right: 5%;
  text-align: left;
  color: #732240;
  border-left: 1vmax solid #a74669;
  border-right: 1vmax solid #a74669;
  border-bottom: 0.25vmax solid #a74669;
  border-top: 0.25vmax solid #a74669;
  border-left: 1vmax solid #a74669;
}

.izq ::after {
  content: "🖍";
  padding-right: 2%;
}

.der {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: bold;
  background-color: #33a59b;
  margin-right: 5%;
  padding-right: 5%;
  margin-left: 5%;
  text-align: right;
  color: #732240;
  border-left: 1vmax solid #a74669;
  border-right: 1vmax solid #a74669;
  border-bottom: 0.25vmax solid #a74669;
  border-top: 0.25vmax solid #a74669;
}

.der ::after {
  content: "🖍";
  padding-left: 2%;
}

.rta {
  font-family: Arial, Helvetica, sans-serif;
  background-color: transparent;
  font-weight: 900;
  color: #850333;
  font-size: 2.75vmin;
}

/*Seccion 1: Mi paso por el Illia*/

.illia {
  background-color: #a74669;
  height: auto;
}

.wrap {
  overflow: hidden;
  margin: 5%;
}
.box {
  float: left;
  position: relative;
  width: 20%;
  padding-bottom: 20%;
}
.boxInner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}
.boxInner img {
  width: 100%;
}
.boxInner .titleBox {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: -50px;
  background: #fff;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-align: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.no-touch .boxInner:hover .titleBox,
.touch .boxInner.touchFocus .titleBox {
  margin-bottom: 0;
}
@media only screen and (max-width: 480px) {
  /* Smartphone view: 1 tile */
  .box {
    width: 100%;
    padding-bottom: 100%;
  }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
  /* Tablet view: 2 tiles */
  .box {
    width: 50%;
    padding-bottom: 50%;
  }
}
@media only screen and (max-width: 1050px) and (min-width: 651px) {
  /* Small desktop / ipad view: 3 tiles */
  .box {
    width: 33.3%;
    padding-bottom: 33.3%;
  }
}
@media only screen and (max-width: 1290px) and (min-width: 1051px) {
  /* Medium desktop: 4 tiles */
  .box {
    width: 25%;
    padding-bottom: 25%;
  }
}

/*Seccion 1: Mis gustos*/

.gustos {
  background-color: #732240;
}

.honeycomb {
	max-width: 800px;
	margin: 50px auto;
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding-bottom: 5.5%;
}

.honeycomb li {
	width: 25%;
	position: relative;
	visibility: hidden;
}

.honeycomb li:after {
	content: '';
	display: block;
	padding-bottom: 86.6%;
}

.honeycomb li:nth-child(7n+5) {
	margin-left: 12.5%;
}

.cell {
	position: absolute;
	width: 98%;
	margin: 0 2%;
	padding-bottom: 110.85%;
	transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
	overflow: hidden;
}

.cell * {
	margin: 0;
	padding: 0;
	position: absolute;
	visibility: visible;
}

.honeycomb li a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
	overflow: hidden;
}

.honeycomb li img {
	left: -100%;
	right: -100%;
	width: auto;
	height: 100%;
	margin: 0 auto;
	transform: rotate3d(0, 0, 0, 0deg);
}

.honeycomb li .title,
.honeycomb li .text {
	width: 100%;
	padding: 5%;
	display: block;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	text-align: center;
	transition: transform .2s ease-out, opacity .3s ease-out;
}

.honeycomb li .title {
	bottom: 50%;
	padding-top: 50%;
	font-size: 1.5em;
	z-index: 1;
	transform: translate3d(0, -100%, 0);
}

.honeycomb li .title:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 45%;
	width: 10%;
	border-bottom: 1px solid #fff;
}

.honeycomb li .text {
	top: 50%;
	padding-bottom: 50%;
	transform: translate3d(0, 100%, 0);
}

.honeycomb li a:hover .title,
.honeycomb li a:focus .title,
.honeycomb li a:hover .text,
.honeycomb li a:focus .text {
	transform: translate3d(0, 0, 0);
}

/*Seccion 1: Viendo al futuro*/

.futuro {
  background-color: #850333;
}
/* Ocultar o mostrar capas segùn el viewport*/
.collage_v,
.collage_h {
  /*ambas clases*/
  /*ocultamos ambas para despuès mostrar la que corresponda*/
  display: none;
  width: 90%;
  margin: auto;
}

/*Las imàgenes dentro de las capas*/
.collage_v img {
  width: 95%;
}

.collage_h img {
  width: 75%;
}

/*Especìficamente mostrar la capa que corresponda*/

/*Si el dispositivo es horizontal*/
@media (orientation: landscape) {
  /*en caso de ser, hace visible la capa*/
  .collage_h {
    display: block;
  }
}

@media (orientation: portrait) {
  /*en caso de ser, hace visible la capa*/
  .collage_v {
    display: block;
  }
}

/*Pie de página*/
.logos {
  width: 30%;
  text-align: right;
}
.colepie {
  width: 70%;
}

.pie {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  z-index: 100;
  width: 100vw;
  text-align: center; 
  background-color: #6fbac2

}