footer {
background-color: #404040;
color: #fff;
padding: 60px 40px 10px;
font-family: 'Inter', sans-serif;
font-size: 14px;
}
.footer-top {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
} .footer-columns {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: flex-start;
}
.footer-column {
flex: 1 1 160px;
min-width: 160px;
}
.footer-column h4 {
font-weight: 600;
margin-bottom: 10px;
color: #ffffff;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 6px;
}
.footer-column ul li a {
color: #d1d1d1;
text-decoration: none;
transition: color 0.2s;
line-height: 1.8; }
.footer-column ul li a:hover {
color: #ffffff;
}
.footer-button {
margin-top: 20px;
background: transparent;
border: 1px solid #d1d1d1;
color: #d1d1d1;
border-radius: 30px;
padding: 10px 20px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none; }
.footer-button:hover {
background-color: #fff;
color: #000;
border-color: #fff;
}
.footer-button i {
font-size: 16px;
} .footer-subcolumns {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 40px;
max-width: 1200px;
}
.footer-subcolumns .footer-column:nth-child(1) {
grid-column: 2 / span 1; }
.footer-subcolumns .footer-column:nth-child(2) {
grid-column: 3 / span 1; }
.footer-subcolumns .footer-column:nth-child(3) {
grid-column: 4 / span 1; } .footer-subcolumns::before {
display: none;
} .footer-column-img {
flex: 1 1 160px;
min-width: 160px;
align-content: center;
margin-right: auto;
}
.footer-libro-img {
max-width: 130px;
width: 100%;
height: auto;
display: block;
} .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding-top: 40px;
margin: 0 auto;
max-width: 1200px;
}
.footer-logo-socials {
display: flex; gap: 789px;
align-items: center;
width: 100%;
}
.footer-logo img {
height: 36px;
}
.footer-social {
display: flex;
gap: 20px;
}
.footer-social a img {
height: 20px;
width: auto;
}
.footer-copyright {
width: 100%;
text-align: left;
font-size: 13px;
color: #ccc;
padding-top: 10px;
}