/* ============================================================
   Beshop Mega Footer v1.0.0 — front.css
   ============================================================ */

.mf-footer { width: 100%; }

.mf-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* Columnas basadas en 12 */
.mf-col--1  { flex: 0 0 calc(100%/12*1 - 30px); }
.mf-col--2  { flex: 0 0 calc(100%/12*2 - 30px); }
.mf-col--3  { flex: 0 0 calc(100%/12*3 - 30px); }
.mf-col--4  { flex: 0 0 calc(100%/12*4 - 30px); }
.mf-col--5  { flex: 0 0 calc(100%/12*5 - 30px); }
.mf-col--6  { flex: 0 0 calc(50% - 15px); }
.mf-col--8  { flex: 0 0 calc(100%/12*8 - 30px); }
.mf-col--12 { flex: 0 0 100%; }

/* ------------------------------------------------------------------
   Items: cada bloque va envuelto en .mf-footer__item con id/clases
   propios (id="mf-item-{id}", data-block-type, mf-item--posN...).
   Por defecto cada item ocupa su propia línea (comportamiento previo).
   ------------------------------------------------------------------ */
.mf-footer__item { }

/* Helper: pon la clase "mf-inline" a dos o más bloques consecutivos
   para que compartan la misma línea (ideal para iconos sociales). */
.mf-footer__item.mf-inline { display: inline-flex; vertical-align: top; margin-right: 18px; }
.mf-footer__item.mf-inline:last-child { margin-right: 0; }

/* Helper: dos items al 50% cada uno en la misma línea. */
.mf-footer__item.mf-half { display: inline-block; width: calc(50% - 10px); vertical-align: top; }

/* Título */
.mf-footer__title {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 10px 0;
  /* padding-bottom: 8px; */
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.mf-footer__icon-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--beshop-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 300;
  padding: 5px 0;
  transition: opacity .15s;
}
.mf-footer__icon-link:hover { opacity: .75; }
.mf-footer__icon-label { line-height: 1.4; }
/* Links */
.mf-footer__link {
  display: block;
  padding: 3px 0;
  text-decoration: none;
  font-size: .875rem;
  transition: opacity .15s;
}
.mf-footer__link:hover { opacity: .75; }
.mf-footer__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Imagen */
.mf-footer__img {
  max-width: 100%;
  height: auto;
  display: block;

}
.mf-footer__img-link { display: inline-block; }
/* Contenedor de imagen con aspect-ratio conocido para evitar CLS */
.mf-footer__img-wrap {
  width: 100%;
  aspect-ratio: 3 / 1; /* ajustar según las imágenes que uses */
  overflow: hidden;
}

/* HTML libre */
.mf-footer__html { font-size: .875rem; }
.mf-footer__html a { text-decoration: none; }
.mf-footer__html a:hover { opacity: .75; }
.mf-footer__html p { margin-bottom: 0.5em; }

/* Responsive */
@media (max-width: 767px) {
  .mf-footer__inner { flex-direction: column; gap: 20px; }
  .mf-col--1, .mf-col--2, .mf-col--3, .mf-col--4,
  .mf-col--5, .mf-col--6, .mf-col--8, .mf-col--12 {
    flex: 0 0 100%;
  }
}

/* Título de sección categoría */
.mf-footer__cat-title {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}