/* =========================
   FOOTER — danilopez25.es
========================= */

.site-footer{
  width: 100%;

  background: rgba(5, 4, 10, .97);
  border-top: 1px solid rgba(181,108,255,.42);

  color: #fff;

  padding: 28px 4%;
  font-size: 15px;
}


/* CONTENEDOR */

.ft-inner{
  width: 100%;
  max-width: none;   /* importante: que respire de lado a lado */

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 40px;

  margin: 0 auto;
}


/* =========================
   IZQUIERDA
========================= */

.ft-copy{
  justify-self: start;

  color: rgba(255,255,255,.80);

  font-size: 16px;
  font-weight: 400;

  white-space: nowrap;
}


/* =========================
   CENTRO
========================= */

.ft-center{
  justify-self: center;

  display: flex;
  align-items: center;

  gap: 26px;
}


/* EMAIL */

.ft-mail{
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: rgba(255,255,255,.78);
  text-decoration: none;

  font-size: 16px;

  transition:
    color .2s ease,
    transform .2s ease;
}

.ft-mail i{
  color: rgba(255,255,255,.65);

  font-size: 20px;

  transition: color .2s ease;
}

.ft-mail:hover{
  color: #fff;
  transform: translateY(-1px);
}

.ft-mail:hover i{
  color: #b56cff;
}


/* SEPARADOR */

.ft-sep{
  width: 1px;
  height: 30px;

  background: rgba(255,255,255,.18);
}


/* REDES */

.ft-social{
  display: flex;
  align-items: center;

  gap: 24px;
}

.ft-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,.72);

  font-size: 25px;
  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.ft-social a:hover{
  color: #b56cff;
  transform: translateY(-2px);
}


/* =========================
   DERECHA — IDIOMA
========================= */

.ft-lang{
  justify-self: end;

  display: inline-flex;
  align-items: center;

  gap: 8px;
}

.ft-lang .lang-flag{
  color: rgba(255,255,255,.48);

  text-decoration: none;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: .08em;

  padding: 5px 8px;

  border-radius: 6px;

  transition:
    color .2s ease,
    background .2s ease;
}

.ft-lang .lang-flag:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

.ft-lang .lang-flag.active{
  color: #fff;
  background: rgba(255,255,255,.09);
}

.ft-lang .lang-sep{
  color: #b56cff;

  font-size: 15px;
  font-weight: 700;
}


/* =========================
   PANTALLAS GRANDES
========================= */

@media (min-width: 1400px){

  .site-footer{
    padding-left: 4.5%;
    padding-right: 4.5%;
  }

  .ft-copy{
    font-size: 17px;
  }

  .ft-mail{
    font-size: 17px;
  }

  .ft-social a{
    font-size: 27px;
  }
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px){

  .site-footer{
    padding: 24px 28px;
  }

  .ft-inner{
    grid-template-columns: 1fr auto;

    row-gap: 20px;
  }

  .ft-copy{
    grid-column: 1;
    grid-row: 1;
  }

  .ft-lang{
    grid-column: 2;
    grid-row: 1;
  }

  .ft-center{
    grid-column: 1 / -1;
    grid-row: 2;

    justify-self: center;
  }
}


/* =========================
   MÓVIL
========================= */

@media (max-width: 600px){

  .site-footer{
    padding: 24px 20px;
  }

  .ft-inner{
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    text-align: center;
  }

  .ft-copy{
    font-size: 14px;

    white-space: normal;
  }

  .ft-center{
    flex-wrap: wrap;
    justify-content: center;

    gap: 15px 20px;
  }

  .ft-mail{
    font-size: 14px;
  }

  .ft-mail i{
    font-size: 18px;
  }

  .ft-sep{
    height: 24px;
  }

  .ft-social{
    gap: 20px;
  }

  .ft-social a{
    font-size: 23px;
  }

  .ft-lang{
    margin-top: 2px;
  }
}