/* ==========================================================================
   MBSoft · Pie de página
   Sustituye al de Astra. Enlaces desde menús, datos desde el personalizador.
   ========================================================================== */

.mb-footer {
  background: #08122B;
  border-top: 1px solid rgba(168, 196, 224, .14);
  padding: 72px 0 34px;
}

.mb-footer__inner {
  max-width: var(--mb-wrap);
  margin: 0 auto;
  padding: 0 var(--mb-gutter);
}

.mb-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
}

/* --- Columna de marca ---------------------------------------------------- */
.mb-footer__logo {
  display: block;
  height: 58px;
  width: auto;
}

/* Astra da margen inferior a los párrafos y a los <li>. El diseño no lo tiene:
   su separación viene solo del gap. Sin estos ceros, el pie crece ~34px y los
   enlaces quedan más sueltos que en la propuesta. */
.mb-footer__about {
  margin: 18px 0 0;
  max-width: 330px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mb-text-mute);
}

.mb-partner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(168, 196, 224, .07);
  border: 1px solid rgba(168, 196, 224, .16);
}
.mb-partner i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-text-mute);
}
.mb-partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  background: var(--mb-white);
}
.mb-partner__logo img {
  display: block;
  width: 100px;
  height: auto;
}

.mb-footer__address {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mb-text-on-dark);
}

/* --- Columnas de enlaces -------------------------------------------------- */
.mb-footer__title {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mb-white);
}

.mb-footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
/* El tamaño va en el <li>, no solo en el enlace: la altura de línea la fija el
   contenedor y con los 16.5px del cuerpo la separación crecía de 30px a 37px. */
.mb-footer__links li {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.3;
}
.mb-footer__links a {
  display: inline-block;
  line-height: 1.3;
  font-size: 14.5px;
  color: var(--mb-text-on-dark);
  text-decoration: none;
  transition: color var(--mb-dur) var(--mb-ease);
}
.mb-footer__links a:hover,
.mb-footer__links a:focus-visible { color: var(--mb-orange); }

.mb-footer__hours {
  font-size: 14.5px;
  color: var(--mb-text-mute);
}

/* --- Redes sociales ------------------------------------------------------- */
.mb-socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
/* Va anidado a propósito: `.mb-footer__links a` tiene la misma especificidad y
   le impondría display:inline-block, descentrando la letra dentro del cuadro. */
.mb-socials .mb-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(168, 196, 224, .1);
  color: var(--mb-text-on-dark);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--mb-dur) var(--mb-ease), background-color var(--mb-dur) var(--mb-ease);
}
.mb-social:hover,
.mb-social:focus-visible {
  color: var(--mb-white);
  background: var(--mb-blue);
}

/* --- Franja inferior ------------------------------------------------------ */
.mb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid rgba(168, 196, 224, .12);
  font-size: 13px;
  color: var(--mb-text-mute);
}

.mb-footer__legal {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-footer__legal a {
  font-size: 13px;
  color: var(--mb-text-mute);
  text-decoration: none;
  transition: color var(--mb-dur) var(--mb-ease);
}
.mb-footer__legal a:hover,
.mb-footer__legal a:focus-visible { color: var(--mb-orange); }

/* --- Botón flotante de WhatsApp ------------------------------------------- */
.mb-whatsapp {
  position: fixed;
  right: 26px;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0D7E8C;
  color: var(--mb-white);
  box-shadow: 0 14px 34px rgba(13, 126, 140, .45);
  transition: transform var(--mb-dur) var(--mb-ease);
}
.mb-whatsapp:hover,
.mb-whatsapp:focus-visible {
  color: var(--mb-white);
  transform: scale(1.08);
}

/* --- Puntos de quiebre ---------------------------------------------------- */
@media (max-width: 900px) {
  .mb-footer { padding-top: 56px; }
  .mb-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
  .mb-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .mb-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .mb-footer__bottom { justify-content: flex-start; }
  /* El botón flotante no debe tapar los enlaces legales en pantallas cortas. */
  .mb-whatsapp { width: 50px; height: 50px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-whatsapp:hover { transform: none; }
}

/* Cuando HubSpot tiene chat, su burbuja se pone abajo a la derecha, justo
   encima de la nuestra. La suya no se puede mover desde aquí, así que la
   nuestra sube. El valor deja hueco para la burbuja de HubSpot (unos 60px)
   más la separación. */
.mb-con-chat-externo .mb-whatsapp {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 560px) {
  .mb-con-chat-externo .mb-whatsapp {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}