/* ==========================================================
   FOXAKA — FOOTER GLOBAL
   Archivo: /css/footer.css
   ========================================================== */


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.foxaka-footer {
  position: relative;

  color: #7b8296;

  padding: clamp(60px, 7vw, 90px) 0 34px;

  margin-top: clamp(50px, 7vw, 90px);
}


/* ----------------------------------------------------------
   CONTENEDOR
   ---------------------------------------------------------- */

.foxaka-footer-container {
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 clamp(18px, 5vw, 44px);
}


/* ----------------------------------------------------------
   GRID PRINCIPAL
   ---------------------------------------------------------- */

.foxaka-footer-grid {
  display: grid;

  grid-template-columns: 1.6fr 1fr 1fr 1fr;

  gap: 44px 40px;
}


/* ----------------------------------------------------------
   COLUMNA FOXAKA
   ---------------------------------------------------------- */

.foxaka-footer-brand {
  min-width: 220px;
}


/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

.foxaka-footer-logo {
  display: block;

  height: 40px;
  width: auto;

  margin-bottom: 18px;
}


/* ----------------------------------------------------------
   DESCRIPCIÓN
   ---------------------------------------------------------- */

.foxaka-footer-description {
  max-width: 290px;

  margin: 0;

  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 400;

  line-height: 1.65;

  color: #7b8296;
}


/* ----------------------------------------------------------
   REDES SOCIALES
   ---------------------------------------------------------- */

.foxaka-footer-socials {
  display: flex;

  gap: 10px;

  margin-top: 22px;
}


/* ----------------------------------------------------------
   BOTÓN RED SOCIAL
   ---------------------------------------------------------- */

.foxaka-footer-social {
  display: inline-flex;

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

  width: 38px;
  height: 38px;

  border-radius: 9px;

  border: 1px solid rgba(255, 255, 255, 0.6);

  color: #7b8296;

  text-decoration: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}


.foxaka-footer-social:hover {
  color: #2f6bed;

  border-color: rgba(47, 107, 237, 0.5);

  background: rgba(47, 107, 237, 0.06);

  transform: translateY(-2px);
}


/* ----------------------------------------------------------
   COLUMNAS
   ---------------------------------------------------------- */

.foxaka-footer-column {
  min-width: 0;
}


/* ----------------------------------------------------------
   TÍTULOS
   ---------------------------------------------------------- */

.foxaka-footer-title {
  margin-bottom: 16px;

  font-family: 'Manrope', sans-serif;

  font-weight: 700;

  font-size: 13px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: #2b3040;
}


/* ----------------------------------------------------------
   CONTENEDOR DE LINKS
   ---------------------------------------------------------- */

.foxaka-footer-links {
  display: flex;

  flex-direction: column;

  gap: 11px;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

.foxaka-footer-links a {
  color: #7b8296;

  font-family: 'Manrope', sans-serif;

  font-size: 15px;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.foxaka-footer-links a:hover {
  color: #2b3040;

  transform: translateX(2px);
}


/* ----------------------------------------------------------
   PARTE INFERIOR
   ---------------------------------------------------------- */

.foxaka-footer-bottom {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 10px;

  margin-top: 48px;

  padding-top: 24px;

  border-top: 1px solid rgba(120, 140, 190, 0.22);

  font-family: 'Manrope', sans-serif;

  font-size: 14px;

  color: #868da0;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .foxaka-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 40px 32px;
  }


  /*
     La columna principal ocupa todo el ancho
     de la primera fila.
  */

  .foxaka-footer-brand {
    grid-column: 1 / -1;
  }


  .foxaka-footer-description {
    max-width: 420px;
  }

}


/* ----------------------------------------------------------
   MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 650px) {

  .foxaka-footer {
    padding-top: 50px;

    padding-bottom: 28px;

    margin-top: 60px;
  }


  .foxaka-footer-grid {
    grid-template-columns: 1fr 1fr;

    gap: 38px 28px;
  }


  .foxaka-footer-brand {
    grid-column: 1 / -1;
  }


  .foxaka-footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    margin-top: 40px;
  }

}


/* ----------------------------------------------------------
   MÓVILES PEQUEÑOS
   ---------------------------------------------------------- */

@media (max-width: 420px) {

  .foxaka-footer-grid {
    grid-template-columns: 1fr;

    gap: 32px;
  }


  .foxaka-footer-brand {
    grid-column: auto;
  }


  .foxaka-footer-description {
    max-width: 100%;
  }

}