/* Piè di pagina (components/layout/footer.inc.php) */

.piede { position: relative; z-index: 4; background: var(--blu-profondo); padding: clamp(4rem, 8vw, 7rem) 0 2rem; overflow: hidden; }
.piede .piede__marchio { display: block; font-size: min(10rem, (100vw - 2 * var(--gutter)) / 8.6); color: var(--bianco); margin-bottom: clamp(3rem, 6vw, 5rem); letter-spacing: 0; }
.piede__griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--filo-blu); }
.piede h3 { font-size: var(--t-piccolo); font-weight: 700; color: var(--su-blu-3); margin-bottom: 1rem; font-stretch: 100%; }
.piede li + li { margin-top: .4rem; }
.piede a { text-decoration: none; color: var(--su-blu-2); transition: color .3s; }
.piede a:hover { color: var(--menta); }
.social { display: flex; gap: .75rem; }
.social a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--filo-blu); color: var(--bianco); transition: background-color .35s var(--esce), color .35s, border-color .35s; }
.social a:hover { background: var(--menta); color: var(--blu); border-color: var(--menta); }
.social svg { width: 1.2rem; height: 1.2rem; }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.75rem; font-size: .8125rem; color: var(--su-blu-3); }
.piede__fondo a { color: var(--su-blu-2); }
@media (max-width: 860px) { .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .piede__griglia { grid-template-columns: 1fr; } }