/*Tipografía para el título*/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');


/*Primeros comandos universales*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*características de las secciones*/
.cabecera{
  position: fixed;
  top:0;
  z-index: 10;
}

.principal{
  margin-top: 10vh;
}


.presentacion{
  width:100%;
  height:95vh;
  background-color:#FEB1DE;
  margin: top 0vh;
  padding-top: 10vh;
}

.conociendome{
  width: 100%;
  height: 95vh;
  background-color: #FF69B4;
  margin: top 0vh;
  font-size: 2vmax;
  color:#6C3483;
  text-align:center;
  letter-spacing:0,50em;
  padding-top: 10vh;
}
.pregunta{
  text-align: right;
  font-size: 1.8vmax;
  padding-right: 5vh;
  
}

.alineacion{
  text-align: left;
  padding-left: 2vh;
}

.padding{
  text-align: left;
  padding-left: 2vh;
  padding-top: 5vh;
}

.illia{
  width: 100%;
  height: 95vh;
  background-color: #FEB1DE;
  margin: top 0vh;
  padding-top: 8vh;
}

.futuro{
  width: 100%;
  height: 95vh;
  background-color: #FF69B4	;
  margin: top 0vh;
  padding-top: 10vh;
  color:#6C3483;
  text-align:center;
  letter-spacing:0,50em;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
}

/*imagenes seccion futuro*/
.foto_futuro_horizontal{
  display:none;
  width: 45%;
}

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

.foto_futuro_vertical{
  display:none;
}

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

.contactos{
  width: 100%;
  height: 100vh;
  background-color: #FEB1DE;
  margin: top 0vh;
  padding-top: 10vh;
  color:#6C3483;
  text-align:center;
  letter-spacing:0,50em;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
}

.pie_pagina{
  width: 100%;
  height: 5vh;
  position: fixed;
  background-color: #FF1493	;
  bottom: 0;
  z-index: 5;
}

.botonera{
    width:100vw;
    height:10vh;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    position: fixed;
    background-color:#F48FB1;
    

}

/*codigo de la botonera*/
.btn {
    padding: 0.5em 2em 0.5em 2.5em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 15px;
    color: #fff6fb;
    letter-spacing: 0.3em;
    text-shadow: -2px 2px 5px #FD3084;
    background-color: transparent;
    border: 2px solid #FEB1DE;
    box-shadow: 0 0 0px 1px #F11271,
      0 0 10px 2px #FD3084,
      inset 0 0 0px 1px #F11271,
      inset 0 0 10px 2px #FD3084;
    transition: 100ms;
  }
 
  .btn:hover {
    box-shadow: 0 0 0px 1px #F11271,
      0 0 10px 2px #FD3084,
      inset 0 0 0px 1px #F11271,
      inset 0 0 30px 2px #FD3084;
    text-shadow: 0 0 10px #FD3084;
    transform: translateY(-5px);
  }
 
  .btn:active {
    box-shadow: 0 0 0px 1px #F11271,
      0 0 25px 2px #FD3084,
      inset 0 0 0px 1px #F11271,
      inset 0 0 30px 2px #FD3084;
    transform: translateY(1px);
  }

  /*código del nombre con estilo*/
  .div{
    font-size: 5rem;
    text-align: center;
    height:90vh;
    line-height: 90vh;
    color: #fcedd8;
    background: FEB1DE;
     font-family: 'Niconne', cursive;
    font-weight: 700;
    text-shadow: 5px 5px 0px #eb452b, 
                10px 10px 0px #efa032, 
                15px 15px 0px #46b59b, 
                20px 20px 0px #017e7f, 
                25px 25px 0px #052939, 
                30px 30px 0px #c11a2b, 
                35px 35px 0px #c11a2b, 
                40px 40px 0px #c11a2b, 
                45px 45px 0px #c11a2b;
}

/*codigo de la galeria*/
p{
  text-align: center;
  font-size:0.8rem;
}

body {
	background-color: #000;
	font-family: Arsenal;
}

.honeycomb {
	max-width: 750px;
	margin: 20px 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: 96%;
	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);
}

/*fin del css*/