/* Pie' di pagina globale: fascia alta a quattro colonne (106px sopra, 83px
   sotto) e riga finale con legali e copyright. Altezza totale 547.59px.
   Il selettore lingua .lingue e' stilato in header.css: i due file viaggiano
   insieme su tutte le pagine. */

.piede{position:relative;background:var(--bianco)}

.piede__alto{
  padding:106px 0 83px;
  background:var(--bianco);
  border-top:1px solid var(--linea);
}
.piede__interno{padding:0 115px}

/* griglia: quattro colonne da 310px su 1240 (i -15px pareggiano il respiro
   interno delle colonne) */
.piede__griglia{
  display:flex;
  flex-wrap:wrap;
  margin:0 -15px;
}
.piede__colonna{
  flex:0 0 25%;
  max-width:25%;
  min-height:1px;
  padding:0 15px;
}
.piede__griglia--due .piede__colonna{flex-basis:50%;max-width:50%}
.piede__colonna--destra{text-align:right}

/* il testo del pie' e' nero, non grigio come il corpo */
.piede__alto{color:var(--nero)}
.piede__alto a{color:inherit;transition:color .2s ease-out}
.piede__alto a:hover{color:var(--accento)}

.piede__titolo{
  margin:0 0 16px;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:37.8px;
  color:var(--nero);
}

/* ------------------------------------------------------- colonna del marchio */
.piede__colonna--marchio{padding-top:11px}
.piede__logo{display:inline-block;max-width:230px}
.piede__logo img{width:100%;height:auto}
.piede__colonna--marchio .lingue{margin-top:31px}

/* --------------------------------------------------------------- menu */
/* anche l'ultima voce tiene i 20px sotto: e' quello che fa la colonna alta
   303.41px, cioe' l'altezza dell'intero pie' */
.piede__menu li{margin:0 0 20px}
.piede__menu a{letter-spacing:1.1px}

/* ------------------------------------------------------------ contatti */
/* colonna flex: cosi' i margini dei paragrafi non si fondono e resta il passo
   di 49.92px fra una riga e l'altra dell'originale */
.piede__contatti{
  display:flex;
  flex-direction:column;
  font-style:normal;
}
.piede__contatti p{margin:0 0 20px}
.piede__contatti p:last-child{margin-bottom:10px}

/* --------------------------------------------------------------- social */
.piede__social{margin:21px 0 20px}
.piede__social a{margin-right:8px;letter-spacing:1.1px}
.piede__social a:last-child{margin-right:0}

/* ------------------------------------------------------------ riga finale */
.piede__basso{
  position:relative;
  padding:4px 0;
  background:var(--bianco);
}
.piede__basso .piede__griglia{position:relative}
.piede__basso .piede__griglia::before{
  content:'';
  position:absolute;
  top:0;
  left:15px;
  right:15px;
  height:1px;
  background:var(--linea);
}
.piede__basso p{
  margin:10px 0;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:26.18px;
  color:#7d7d7d;
}
.piede__basso a{color:inherit;transition:color .2s ease-out}
.piede__basso a:hover{color:var(--accento)}

/* --------------------------------------------------------- schermi stretti */
@media (max-width:1024px){
  .piede__interno{padding:0 40px}
  .piede__griglia{margin-top:-30px;margin-bottom:-30px}
  .piede__colonna{flex-basis:50%;max-width:50%;margin:30px 0}
  .piede__griglia--due .piede__colonna{margin:0}
}

@media (max-width:768px){
  .piede__alto{padding:70px 0 60px}
  .piede__colonna{flex-basis:100%;max-width:100%}
  .piede__griglia--due .piede__colonna{flex-basis:100%;max-width:100%}
  .piede__colonna--destra{text-align:left}
  .piede__basso p{margin:3px 0}
  .piede__basso .piede__griglia{padding:10px 0 16px}
}