
/* Footer */ 

.footer{
    
    background-color: #ffffff;
}

.footer__title{
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 30px;
}


.footer__container{
    display: flex;
    align-items: center;
    gap: 5em;
    border-bottom: 1px solid #0E4F88;
}


.logoimg__footer{
    width: 400px;
    top: 0;
    left: 0;
    margin-top: 20px;
}

.text__tittle__footer{
    margin-bottom: 20px;
}


.direction__container__footer{
    display: flex;
    flex-direction: column;
    border-top: solid #0E4F88 1px;
    padding-top: 25px;
    gap: 2em;

}

.pie__icons__footer{
    display: flex;
    align-items: center; 
    gap: 1em;
}

.pie__icons__footer > i{
    color: #0E4F88;
}

.nav--footer{
    padding-bottom: 20px;
    display: grid;
    gap: 1em;
    grid-auto-flow: row;
    height: 100%;
}

.nav__link--footer{
    display: flex;
    margin: 0;
    margin-right: 20px;
    flex-wrap: wrap;
}

.hero__paragraph__footer{
    padding: 20px 0;
    font-size: 15px;

}


.footer__input{
    background-color: #FFFFFF;
    height: 50px;
    display: block;
    padding-left: 10px;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    border: 1px solid #0E4F88;
    margin-right: 16px;
}

.footer__submit{
    margin-left: auto;
    display: inline-block;
    height: 50px;
    padding: 0 20px;
    background-color: #0E4F88;
    border: none;
    font-size: 1rem;
    color: #FFFFFF;
    border-radius: 6px;
    cursor: pointer;
}

.footer__copy{
    padding: 10px 0;
    text-align: center;
    color: #0E4F88;
}

.footer__copyright{
    font-size: 15px;

}

.footer__icons{
    margin-bottom: 10px;
}

.footer__img{
    width: 30px;
}

/* ICONOS REDES SOCIALES */

.links {
    display:flex;
    gap:15px;
    padding-bottom: 30px;
}

.links > a {
    text-decoration: none;
    width: 40px;
    height: 40px;
    background: #0E4F88;
    text-align: center;
    transition: .1s;
    border-radius: 50%;
}

.links > a > i {
    color:#fff;
    line-height: 40px;
    font-size: 20px;
}

.links > a:hover {
    background-color: #0b3356;
    color: #FFF;
}


/* CONTADOR */ 
/*
.countdown{
	--number-color: hsl(0, 0%, 100%);
	--text-color: hsl(0, 0%, 100%);
	--dot-color: hsl(0, 0%, 100%);
	--dot-color-remaining: #0E4F88;
	--dot-color-active: hsl(0 100% 50%);
	font-family: system-ui, sans-serif;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	width: min(60rem, 100%);
	margin-inline: auto;
	container: inline-size;
	> .part {
	  aspect-ratio: 1/1;
	  display: grid;
	  place-items: center;
	  > .remaining {
		grid-area: 1/1;
		color: hsl(0 0% 100%);
		display: grid;
		text-align: center;
		font-size: 4cqi;
		>.number {
		  color: var(--number-color);
		}
		>.text {
		  color: var(--text-color);
		  text-transform: uppercase;
		  font-size: 0.5em;
		}
	  }
	  > .dot-container {
		grid-area: 1/1;
		height: 100%;
		width: 4%;
		rotate: calc(360deg / var(--dots) * var(--dot-idx));
		> .dot {
		  width: 100%;
		  aspect-ratio: 1/1;
		  background-color: var(--dot-color);
		  border-radius: 50%;
		  transition: background-color .25s;
		  &[data-active=true]{
			background-color: var(--dot-color-remaining);
			&[data-lastactive=true]{
			  background-color: var(--dot-color-active);
			}
		  }
		}
	  }
	}
  }
  

.counter__new__year {
	font-family: system-ui, sans-serif;
	color: #ffffff;
	text-align: center;
    
	>span:last-of-type{
	  color: hsl(0, 0%, 100%);
      
	}
  }


.counter__container{
    border-top: solid #0E4F88 1px;
    background-color: #000;
	margin: 0;
	padding: 2rem;
	display: grid;
	gap: 1rem;
	align-content: center;
  }

.counter__new__year{
	font-family: system-ui, sans-serif;
    font-size: 3em;
	color: hsl(0, 0%, 100%);
	text-align: center;
	>span:last-of-type{
	  color: hsl(0, 0%, 100%)
	}
  }
*/

  @media (max-width:800px){


    .footer__container{
        flex-wrap: wrap;
    }

    .nav--footer{
        width: 100%;
        justify-items: center;
    }

    .nav__link--footer{
        width: 100%;
        justify-content: space-evenly;
        margin: 0;
    }


    .footer__input{
        flex: 1;
    }


    

}


@media (max-width:600px){

    .footer__title{
        justify-self: start;
        margin-bottom: 15px;
    }

    .nav--footer{
        padding-bottom: 40px;
    }

    .nav__link--footer{
        justify-content: space-evenly;
    }

    .footer__inputs{
        flex-wrap: wrap;
    }

    .footer__input{
        flex-basis: 100%;
        margin: 0;
        margin-bottom: 16px;
        
    }

    .footer__submit{
        width: 100%;
    }


}


  /*

.number{
    font-size: 0.6em;
}

.text{
    font-size: 1em;
}

.remaining {
    width: 100px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

*/