/* ==========================================================================
   ML Realtor — barra de contacto y compartir     v1.0.0 — EN PRODUCCIÓN

   Reviste el componente `.ml-share` (mu-plugin propio ml-share-buttons.php).
   NO cambia ni un enlace ni una función: cada botón sigue compartiendo a
   donde compartía. Lo único que cambia es que dejan de imponer el verde de
   WhatsApp, el azul de Facebook y el degradado de Instagram sobre la ficha.

   Idea: se callan en reposo, se encienden al pasar el cursor. El símbolo
   basta para reconocerlos; el color de la marca ajena no hace falta.
   ========================================================================== */

.ml-share {
  --i: #0A0A0A;
  --p: #F5F3EF;
  --g: #C8A96E;
  --l: #E5E1D8;
  --m: #6E6A63;
  --c: cubic-bezier(.2, .75, .2, 1);

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 26px 0 4px;
  padding: 22px 0;
  border-top: 1px solid var(--l);
  border-bottom: 1px solid var(--l);
}

/* --- CTA: la línea directa contigo. Es el botón que más debe pesar. ----- */
.ml-share .ml-share__cta {
  background: var(--i) !important;
  color: var(--p) !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: .71rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: 16px 30px !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: background .45s var(--c), color .45s var(--c);
}
.ml-share .ml-share__cta svg {
  fill: var(--g);
  width: 19px; height: 19px;
  transition: fill .45s var(--c);
}
.ml-share .ml-share__cta:hover { background: var(--g) !important; color: var(--i) !important; }
.ml-share .ml-share__cta:hover svg { fill: var(--i); }

/* --- Fila de compartir -------------------------------------------------- */
.ml-share .ml-share__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto !important;
}
.ml-share .ml-share__label {
  font-family: 'Montserrat', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--m);
  margin-right: 6px;
}

.ml-share .ml-share__btn {
  background: transparent !important;
  border: 1px solid var(--l) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .45s var(--c), border-color .45s var(--c), transform .45s var(--c);
}
.ml-share .ml-share__btn svg { fill: var(--i) !important; transition: fill .45s var(--c); }
.ml-share .ml-share__btn:hover {
  background: var(--i) !important;
  border-color: var(--i) !important;
  transform: translateY(-3px);
}
.ml-share .ml-share__btn:hover svg { fill: var(--g) !important; }

/* Que el foco de teclado se vea: los círculos monocromos lo esconderían. */
.ml-share .ml-share__btn:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

@media (max-width: 640px) {
  .ml-share { flex-direction: column; align-items: stretch; }
  .ml-share .ml-share__cta { justify-content: center; }
  .ml-share .ml-share__row { justify-content: space-between; }
}