/* =========================================================
   RODAPÉ
   Mesmo modelo, tamanhos e cores do rodapé do site Uni Alimentação
   (UNIALIMENTACAO/assets/css/style.css), com a coluna MARCAS a mais.
   O HTML fica no fim de cada página (marcador <!-- RODAPE UNI -->).
========================================================= */

.rodape-uni,
.rodape-uni * {
  box-sizing: border-box;
}

.rodape-uni {
  margin-top: 40px;
  border-top: 1px solid #ECE7DE;
  background: #ffffff;
  color: #474747;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.rodape-uni__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
  gap: 28px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 32px;
}

/* marca: Uni Soluções */
.rodape-uni__marca {
  display: grid;
  gap: 14px;
  align-content: start;
}

.rodape-uni__logo {
  display: inline-block;
  width: 260px;
  max-width: 100%;
}

.rodape-uni__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.rodape-uni__frase {
  margin: 0;
  max-width: 38ch;
  color: #54595F;
  font-size: .86rem;
  line-height: 1.55;
}

.rodape-uni__redes {
  display: flex;
  gap: 10px;
}

.rodape-uni__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transition: transform .2s ease;
}

.rodape-uni__redes img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rodape-uni__redes a:hover,
.rodape-uni__redes a:focus-visible {
  transform: scale(1.1);
}

/* colunas */
.rodape-uni .rodape-uni__coluna h2,
.rodape-uni__coluna h4 {
  margin: 0 0 6px;
  padding: 0;
  color: #474747;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rodape-uni__coluna ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-uni__coluna li {
  margin: 0;
  padding: 0;
}

.rodape-uni__coluna a,
.rodape-uni__coluna p,
.rodape-uni__coluna span {
  color: #54595F;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.rodape-uni__coluna a {
  transition: color .2s ease;
}

.rodape-uni__coluna a:hover,
.rodape-uni__coluna a:focus-visible {
  color: #FE0000;
}

.rodape-uni__coluna .rodape-uni__loja {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: #FE0000;
  font-weight: 700;
}

.rodape-uni__coluna .rodape-uni__loja:hover,
.rodape-uni__coluna .rodape-uni__loja:focus-visible {
  color: #C80000;
}

.rodape-uni__loja img {
  display: block;
  width: auto;
  height: 18px;
}

.rodape-uni__coluna p {
  margin: 0;
}

/* unidades, com o ícone de localização à esquerda */
.rodape-uni__unidades {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  font-style: normal;
}

.rodape-uni__coluna .rodape-uni__unidade {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .86rem;
}

.rodape-uni__coluna .rodape-uni__unidade span {
  font-size: .86rem;
}

.rodape-uni__pin {
  flex-shrink: 0;
  margin-top: 2px;
  color: #FE0000;
}

.rodape-uni__unidades strong {
  color: #474747;
  font-weight: 600;
}

.rodape-uni__coluna .rodape-uni__social-titulo {
  margin-top: 14px;
}

.rodape-uni__instituto {
  display: inline-block;
  margin-top: 8px;
  transition: opacity .2s ease;
}

.rodape-uni__instituto:hover {
  opacity: .8;
}

.rodape-uni__instituto img {
  display: block;
  width: auto;
  height: 32px;
}

/* faixa final */
.rodape-uni__base {
  padding: 16px 0;
  border-top: 1px solid #ECE7DE;
}

.rodape-uni__base p {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  color: #54595F;
  font-size: .85rem;
}

.rodape-uni__base a {
  color: #54595F !important;
  text-decoration: none !important;
}

.rodape-uni__base a:hover {
  color: #FC0404 !important;
}

.rodape-uni__sep {
  margin: 0 6px;
  color: #c9c3b8;
}

@media (max-width: 1100px) {
  .rodape-uni__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-areas:
      "marca nav marcas"
      "marca contato empresa";
  }

  .rodape-uni__marca              { grid-area: marca; }
  .rodape-uni__coluna--nav        { grid-area: nav; }
  .rodape-uni__coluna--marcas     { grid-area: marcas; }
  .rodape-uni__coluna--contato    { grid-area: contato; }
  .rodape-uni__coluna--empresa    { grid-area: empresa; }
}

@media (max-width: 700px) {
  .rodape-uni__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "marca marca"
      "nav marcas"
      "contato contato"
      "empresa empresa";
  }
}

@media (max-width: 420px) {
  .rodape-uni__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marca"
      "nav"
      "marcas"
      "contato"
      "empresa";
  }
}