/** GENERALES  */
:root{
     --rojo100: #E60023;
     --rojoHover: #AD081B;
     --gris100: #F4F4F4;
     --gris200: #efefef;
     --gris300: #767676;
     --gris400: #111;
     --border: #7FC1FF;
}

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a{
     text-decoration: none;
}


.btn{
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--gris400);
     height: 48px;
     min-width: 73px;
     border-radius: 40px;
     color: #FFF;
     text-decoration: none;
     font-size: 16px;
     font-weight: 700;
}



/** MENU PRINCIPAL */
nav{
     position: fixed;
     width: 100%;
     height: 80px;
     background: #FFF;
     display: flex;
     align-items: center;
     padding: 4px 16px;
     z-index: 1;
}

nav .img-logo{
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     border-radius: 50%;
}

nav .img-logo img{
     width: 24px;
     height: 24px;
     border-radius: 50%;
}

nav .img-logo img:hover{
     box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
}

/*? Input del menu */
.input-container{
     flex: 1 1 auto;
     min-width: 407px;
     height: 48px;
     padding: 0 8px;
     position: relative;
}

nav input{
     width: 100%;
     height: 100%;
     border-radius: 40px;
     border: 3px solid transparent;
     background: var(--gris200);
     padding: 0 0 0 38px;
     outline: none;
}

nav input::placeholder{
     font-size: 16px;
}

nav input:focus{
     border: 3px solid var(--border);
     padding: 0 0 0 16px;
}

nav .input-container i{
     position: absolute;
     top: 0;
     left: 0;
     width: 48px;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 0 0 16px;
     color: var(--gris300);
}

nav input:focus ~ i{
     width: 0;
     opacity: 0;
}


/*? Menu iconos */
.iconos{
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 168px;
     font-size: 24px;
     color: var(--gris300);
}

nav .iconos span,
nav .iconos div{
     width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     border-radius: 50%;
}

nav .iconos span:hover,
nav .iconos div:hover{
     background: rgba(0, 0, 0, 0.07);
}

nav .iconos span:last-child{
     width: 24px;
     height: 24px;
     font-size: 18px;
}

nav .iconos img{
     width: 24px;
     height: 24px;
     border-radius: 50%;
     object-fit: cover;
}


/** GALERIA */
.row{
     width: 1260px;
     margin: 0 auto;
     padding: 80px 0;
     display: flex;
}

.column{
     width: 23%;
     margin: 0 10px;
}

.item{
     margin: 0 0 16px 0;
}

.container-img{
     position: relative;
     cursor: zoom-in;
     transition: all .3s;
}

.container-img:hover::before{
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 99%;
     background: rgba(0, 0, 0, 0.4);
     border-radius: 16px;
     transition: all .3s;
}


.container-img img{
     width: 100%;
     border-radius: 16px;
}




/*? Hover de post  */
.container-img div{
    position: absolute;
    width: 100%;
    display: flex;
    padding: 15px;
    opacity: 0;
    transition: all .2s;
}

.container-img:hover div{
     opacity: 1;
}

.container-img .top-row{
     top: 0;
     left: 0;
     justify-content: space-between;
     align-items: flex-start;
}

.container-img .top-row a:not(.btn){
     color: #FFF;
     font-weight: 700;
     width: 40%;
     height: 100%;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
}

.container-img .top-row span{
     color: #FFF;
     align-self: center;
     padding-right: 5px;
     font-size: 14px;
}

.container-img .top-row .btn{
     background: var(--rojo100);
     height: 45px;
     min-width: 93px;
}

.container-img .top-row .btn:hover{
     background: var(--rojoHover);
}


.container-img .bottom-row{
     bottom: 0;
     left: 0;
     height: 64px;
     justify-content: space-between;
}

.container-img .bottom-row a{
     background: var(--gris100);
     border-radius: 20px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     color: #111;
     font-weight: 700;
     font-size: 0.9em;
}

.container-img .bottom-row a:nth-child(1){
     width: 62%;
     height: 100%;
     overflow: hidden;
}

.container-img .bottom-row a:nth-child(1) span{
     padding: 0 8px;
     transform: rotate(45deg);
     font-size: 12px;
}

.container-img .bottom-row a:nth-child(2),
.container-img .bottom-row a:nth-child(3){
     width: 32px;
     justify-content: center;
}


/*? Informacion de post  */
.info-img{
     display: flex;
     flex-direction: column;
     padding: 5px 10px;
}

.info-img .info{
     display: flex;
     align-items: center;
}

.info-img .info img{
     width: 32px;
     height: 32px;
     object-fit: cover;
     border-radius: 50%;
}

.info-img .info a{
     font-size: 14px;
     color: var(--gris400);
     padding: 0 5px;
}

.info-img .info a:hover{
     text-decoration: underline;
}

.reactions{
     display: flex;
     align-items: center;
     margin: 5px 0;
     cursor: pointer;
}

.reactions img{
     width: 16px;
     height: 16px;
     margin-right: 1px;
}

.reactions span{
     font-size: 14px;
     margin-left: 5px;
     color: var(--gris400);
}




/** BOTONES INFERIORES  */
.btn-inferiores{
     position: fixed;
     right: 25px;
     bottom: 20px;
     display: flex;
     flex-direction: column;
}

.btn-inferiores a{
     display: flex;
     justify-content: center;
     align-items: center;
     background: #FFF;
     color: var(--gris400);
     font-size: 20px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     margin: 5px 0;
     box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.1);
}

.btn-inferiores a:hover{
     background: var(--gris100);
}