/* Pie de página.
   Parte de styles/ — se cargan en orden desde index.html. */

.pie {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem;
  align-items: end;
  padding: clamp(2.5rem, 6vw, 4rem) var(--bleed) clamp(4rem, 9vh, 6rem);
  max-width: var(--maxw); margin-inline: auto;
  border-top: 1px solid var(--hueso-08);
}
.pie__marca {
  margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 122;
  font-weight: 900; font-size: clamp(1.4rem, 4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: -.02em;
}
.pie__marca em { font-style: normal; font-weight: 300; color: var(--hueso-45); }
.pie__ciudad { margin: .4rem 0 0; font-family: var(--mono); font-size: .76rem; color: var(--hueso-45); }
.pie__col--links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pie__col--links a {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--hueso-70);
  transition: color .25s;
}
.pie__col--links a:hover { color: var(--oro); }
.pie__legal {
  grid-column: 1 / -1; margin: 1.5rem 0 0;
  font-family: var(--mono); font-size: .7rem; color: var(--hueso-45);
}

/* barra de progreso */

@media (max-width: 560px) {
  .pie { grid-template-columns: 1fr; align-items: start; }
}