/* fuentes */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

/* caracteristicas */

* {
  color: rgb(0, 0, 0);
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  scroll-behavior: smooth;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.titulo {
  font-family: raleway;
  font-size: 10vmin;
  color: black;
  background-color: inherit;
}

/* formato cabecera */

.cabecera {
  width: 100vw;
  height: 3vh;
  background-color: #869258;
  color: black;
  position: fixed;
  top: 0vh;
  text-align: center;
  z-index: 1;
}

/* barra de navegacion */

.botonera {
  display: flex;
  justify-content: space-around;
}

button {
  border: 1px solid #588157;
  border-radius: 5px;
  background: rgb(255, 255, 255);
  color: #588157;
  font-style: italic;
  padding: 10px;
  padding-right: 14px;
  padding-left: 12px;
  font-size: 17px;
}

button:hover {
  background-color: #588157;
  color: white;
  border: 1px solid #588157;
}

/* formato pie */

.pie {
  width: 100vw;
  height: 10vh;
  background-color: #869258;
  color: black;
  position: fixed;
  bottom: 0vh;
  text-align: center;
  margin-top: 50px;
}

/* formato social bar */

footer .social-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 7px 5px;
}

footer .social-bar a {
  font-size: 25px;
  font-family: 'Times New Roman', Times, serif;
  color: #fff;
  transition: all .5s ease;
}

footer.social-bar .instagram:hover {
  transform: scale(1.5, 1.5);
  color: #3f729b;
}

/* contenedor principal */

.contenido {
  width: 90vw;
  margin: auto;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
}

/* configuracion general de apartados */

.seccion {
  width: 100%;
  min-height: 95vh;
  padding: 0;
}

/* apartados idividuales */

/* apartado presentación */

.presentacion {
  background-color: #86B577;
  display: flex;
  align-items: center;
  justify-content: center;
}

.last-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: #86B577;
  background-size: .2em 100%;
  font: 10.5em/1 Open Sans, Impact;
}

.text {
  /* Establecemos las características del texto */
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  /* Establecemos la animación */
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #2C3770;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #5E77F2;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #1b1bde;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #828CBD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #0B2559;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.text:nth-child(5n + 1) {
  stroke: #051568;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #5E77F2;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #1b418d;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #4c4c9e;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #828CBD;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

svg {
  position: absolute;
  width: 80%;
}

/* apartado preguntas */

.preguntas {
  background-color: #79A36C;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
}

/* apartado paso illia */

.illia {
  background-color: #6D9462;
}

/* apartado preferencias */

.preferencias {
  background-color: #5F8054;
}

.contenedor{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items:center;
  height: 100vh;
}
.contenedor figure{
 position:relative;
  height: 220px;
  cursor: pointer;
  width: 350px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0px 15px 25px rgba(0,0,0,0.50);
}
.contenedor figure img{
  width: 100%;
  height: 100%;
  transition: all 400ms ease-out;
  will-change: transform;
}
.contenedor figure .capa{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,103,123,0.7);
  transition: all 400ms ease-out;
  opacity: 0;
  visibility: hidden;
 text-align: center;
}
.contenedor figure:hover > .capa {
  opacity: 1;
  visibility: visible;
}
.contenedor figure:hover > .capa h3{
  margin-top: 70px;
  margin-bottom: 15px;
}
.contenedor figure:hover > img{
  transform: scale(1.3);
}
.contenedor figure .capa h3{
  color: #fff;
  font-weight: 400;
  margin-bottom: 120px;
  transition: all 400ms ease-out;
   margin-top: 30px;
}
.contenedor figure .capa p{
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
  max-width: 220px;
  margin: auto;
}

/* apartado futuro */

.futuro {
  background-color: #54704A;
}

.collage_v,
.collage_h {
  display: none;
  width: 90%;
  margin: auto;
}

.collage_v img {
  width: 100%;
}

.collage_h img {
  width: 100%;
}

@media (orientation:portrait) {
  .collage_v {
    display: block;
  }
}

@media (orientation:landscape) {
  .collage_h {
    display: block;
  }
}

/* Formato preguntas y respuestas */

.preguntas h2 {
  background-color: inherit;
  margin-right: 1000px;
}

.tarjeta {
  position: relative;
  width: 130px;
  height: 150px;
  margin: 20px;
  background-color: inherit;
}

.tarjeta .cara {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  transition: .5s;
}

.tarjeta .frente {
  transform: perspective(600px) rotateY(0deg);
  box-shadow: 0 5px 10px #273622;
}

.tarjeta .frente img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta .frente h3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  font-size: 15px;
  line-height: 25px;
  color: #dad7cd;
  background: rgba(0, 0, 0, .4);
  text-align: center;
}

.tarjeta .atras {
  transform: perspective(600px) rotateY(180deg);
  background: #54704A;
  padding: 5px;
  color: #dacdcd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 5px 10px #000;
}

.tarjeta .atras h3 {
  font-size: 13px;
  margin-top: 5px;
  letter-spacing: 1px;
  background-color: inherit;
}

.tarjeta .atras p {
  font-size: 12px;
  background-color: inherit;
  margin-bottom: 10px;
  text-align: center;
}

.tarjeta:hover .frente {
  transform: perspective(600px) rotateY(180deg);
}

.tarjeta:hover .atras {
  transform: perspective(600px) rotateY(360deg);
}

/* seccion mi paso por el illia*/

.illia {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  padding: 1rem;
  display: flex;
  list-style: none;
  justify-content: space-around;
  flex-wrap: wrap;
}

li {
  background-color: #ffdfd9;
  color: #000;
  padding: 0.51rem;
}

.container {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 290px));
  grid-gap: 1rem;
  padding: 1rem;
  justify-content: center;
  box-shadow: 0 1px 1px #000;
}

.cnai img {
  background-position: top;
  background-size: cover;
  height: 200px;
  width: 290px;
  box-shadow: 0 2px 10px #000;
  cursor: pointer;
  transition: all 0.2s;
}

img:hover {
  box-shadow: none;
  transform: scale(1.1);
}