/* =========================================================
   ELEMENTOS COMPARTIDOS
   HEADER / FOOTER / REDES SOCIALES
   ========================================================= */

.somefi-footer {
  width: 100%;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #071827;
  color: rgba(255,255,255,.70);
}

.somefi-footer-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 48px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.somefi-footer-brand {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;
}

.somefi-footer-logo {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;

  object-fit: contain;
}

.somefi-footer-brand > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.somefi-footer-brand strong {
  color: #fff;
  font-size: .76rem;
  line-height: 1.1;
}

.somefi-footer-brand span {
  margin-top: 3px;

  color: rgba(255,255,255,.42);
  font-size: .60rem;
  line-height: 1.2;
}


/* =========================================================
   REDES
   ========================================================= */

.somefi-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;
}

.somefi-social {
  width: 34px;
  height: 34px;

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

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;

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

  text-decoration: none;

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

.somefi-social:hover {
  transform: translateY(-2px);

  color: #10b7d5;

  border-color: rgba(16,183,213,.55);

  background: rgba(16,183,213,.08);
}

.somefi-social svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: currentColor;
}

.somefi-social-mail svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Tooltip simple */

.somefi-social {
  position: relative;
}

.somefi-social::after {
  content: attr(aria-label);

  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);

  transform:
    translateX(-50%)
    translateY(3px);

  padding: 5px 8px;

  pointer-events: none;

  opacity: 0;

  border-radius: 6px;

  color: #fff;
  background: #10263a;

  font-size: .61rem;
  white-space: nowrap;

  transition:
    opacity .16s ease,
    transform .16s ease;
}

.somefi-social:hover::after {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


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

@media (max-width: 680px) {

  .somefi-footer-inner {
    min-height: auto;

    align-items: center;
    gap: 12px;
  }

  .somefi-footer-brand span {
    display: none;
  }

  .somefi-footer-brand strong {
    font-size: .70rem;
  }

  .somefi-footer-logo {
    width: 32px;
    height: 32px;

    flex-basis: 32px;
  }

  .somefi-social {
    width: 31px;
    height: 31px;
  }

  .somefi-social svg {
    width: 15px;
    height: 15px;
  }

}

@media (max-width: 480px) {

  .somefi-footer-inner {
    width: min(100% - 20px, 1180px);
  }

  .somefi-footer-brand > div {
    display: none;
  }

  .somefi-footer-links {
    margin-left: auto;
  }

}