/* Footer global STOIC: áreas (tienda, marca, cuenta, redes) y barra legal. Sin logo. */
.stoic-foot {
  background: var(--petroleo, #102D35);
  color: #fff;
  font-family: "Apercu Pro", "Figtree", system-ui, sans-serif;
  padding: 56px 20px 28px;
}
.stoic-foot .sf-in { max-width: 1200px; margin: 0 auto; }

/* Áreas: una columna en celular, cuatro en escritorio */
.stoic-foot .sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.stoic-foot .sf-col h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.stoic-foot .sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stoic-foot .sf-col a {
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 280ms cubic-bezier(.23,1,.32,1), color 200ms, transform 160ms cubic-bezier(.23,1,.32,1);
}
.stoic-foot .sf-col a:hover { color: #fff; background-size: 100% 1px; }
.stoic-foot .sf-col a:active { transform: scale(.97); }

/* Redes: ícono y nombre */
.stoic-foot .sf-soc a { display: inline-flex; align-items: center; gap: 10px; }
.stoic-foot .sf-soc a:active { transform: scale(.97); }
.stoic-foot .sf-soc svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Barra inferior: copyright y legal */
.stoic-foot .sf-bar {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.stoic-foot .sf-base { margin: 0; font-size: 13px; color: rgba(255,255,255,.62); }
.stoic-foot .sf-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.stoic-foot .sf-legal a { color: rgba(255,255,255,.62); text-decoration: none; font-size: 13px; }
.stoic-foot .sf-legal a:hover { color: #fff; }

@media (min-width: 760px) {
  .stoic-foot { padding: 72px 40px 32px; }
  .stoic-foot .sf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  .stoic-foot .sf-bar { grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
  .stoic-foot .sf-legal { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .stoic-foot .sf-col a { transition: none; } }