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

body {
  background-color: rgb(79, 162, 231);
}
.general {
  width: 100vw;
  min-height: 100vh;
}
.cabecera {
  width: 100%;
  height: 15%;
  background-color: rgb(37, 56, 228);
  position: fixed;
  top: 0;
  z-index: 5;
}

.botonera {
  color: aquamarine;
  background-color: rgb(37, 56, 228);
  text-align: center;
  line-height: 5;
  
}
.pie_pagina {
  width: 100%;
  height: 5%;
  background-color: rgb(37, 56, 228);
  position: fixed;
  bottom: 0;
}

.principal {
  width: 90%;
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 5vh;
  padding: 0;
  height: 85vh; /* altura que sacando la cabecera y el pie de pagina tengo disponible */

  /* para organizar */
  display: flex;
  flex-direction: column;
}

#presentacion {
  /* diseño/formato de presentacion */
  width: 100%;
  min-height: 100vh;
  background-color: rgb(54, 85, 208);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.titulo_principal {
  font-size: 150%;
  font-family: "Indie Flower", cursive;
  text-align: center;
}

#conociendome {
  width: 100%;
  min-height: 100vh;
  background-color: rgb(60, 99, 163);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#paso_por_el_illia {
  width: 100%;
  min-height: 1000vh;
  background-color: rgb(23, 71, 95);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.galeria {
  display: grid;
  gap: 20px; 
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.imagen {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.imagen img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

#futuro {
  width: 100%;
  min-height: 100vh;
  background-color: rgb(14, 101, 101);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto_v{
    width: 400px;
    height: 300px;
    position: absolute;
    right: 12%  ;
    top: 1235%;
  }
#contactos {
  width: 100%;
  min-height: 100vh;
  background-color: rgb(48, 91, 219);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.info_pie{
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif ;
}

.pregunta {
  width: 85vw;
  text-align: left;
  font-size: 2.5vh;
}

.respuesta {
  width: 85vw;
  text-align: right;
  font-size: 2.5vh;
}

.textofuturo {
  width: 40%;
  text-align: left;
  left: 15%;
  position: absolute;

}

.imageninicio {
  padding-right: 80px;
}