/**
 * Metrópoli 360 — Botones de compartir.
 * Placas angulares con esquina achaflanada, en la línea del cabezal déco.
 */

.m360-compartir{
  --s-cal:var(--m360-cal,#DED8C8);
  --s-tenue:var(--m360-cal-tenue,#9C9484);
  --s-oro:var(--m360-oro,#C89B3C);
  --s-obsidiana:var(--m360-obsidiana,#12100E);
  --s-linea:rgba(222,216,200,.2);

  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:relative;
}

.m360-compartir--cabeza{
  border-bottom:1px solid var(--s-linea);
  padding-bottom:22px;margin-bottom:30px;
}
.m360-compartir--pie{
  border-top:1px solid var(--s-linea);border-bottom:1px solid var(--s-linea);
  padding:24px 0;margin:44px 0 0;
}

.m360-compartir-rotulo{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--s-tenue);white-space:nowrap;
}
.m360-compartir--pie .m360-compartir-rotulo{color:var(--s-oro)}

.m360-compartir-botones{display:flex;gap:8px;flex-wrap:wrap;flex:1}

.m360-boton{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;background:none;cursor:pointer;
  border:1px solid var(--s-linea);color:var(--s-tenue);
  font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
  /* Esquina achaflanada: el chaflán es el gesto déco del tema. */
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.m360-boton svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;display:block}
.m360-boton-txt{white-space:nowrap}

.m360-boton:hover,.m360-boton:focus-visible{color:var(--s-obsidiana)}
.m360-boton--whatsapp:hover,.m360-boton--whatsapp:focus-visible{background:#4EA574;border-color:#4EA574}
.m360-boton--facebook:hover,.m360-boton--facebook:focus-visible{background:#4A7FC1;border-color:#4A7FC1}
.m360-boton--x:hover,.m360-boton--x:focus-visible{background:var(--s-cal);border-color:var(--s-cal)}
.m360-boton--telegram:hover,.m360-boton--telegram:focus-visible{background:#58C4EE;border-color:#58C4EE}
.m360-boton--correo:hover,.m360-boton--correo:focus-visible{background:var(--s-oro);border-color:var(--s-oro)}
.m360-boton--enlace:hover,.m360-boton--enlace:focus-visible{background:var(--s-oro);border-color:var(--s-oro)}
.m360-boton--nativo:hover,.m360-boton--nativo:focus-visible{background:var(--s-oro);border-color:var(--s-oro)}

.m360-boton:focus-visible{outline:2px solid var(--m360-arco,#58C4EE);outline-offset:3px}
.m360-boton:active{transform:translateY(1px)}
.m360-boton[hidden]{display:none}

/* Confirmación de copiado */
.m360-compartir-aviso{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--s-oro);
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;
  white-space:nowrap;
}
.m360-compartir-aviso.m360-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .m360-boton,.m360-compartir-aviso{transition:none}
  .m360-boton:active{transform:none}
}

/* En pantallas chicas manda WhatsApp: se queda con texto, el resto son glifos. */
@media(max-width:720px){
  .m360-compartir{gap:12px}
  .m360-compartir--pie{padding:20px 0;margin-top:34px}
  .m360-boton{padding:10px 12px}
  .m360-boton .m360-boton-txt{display:none}
  .m360-boton--whatsapp .m360-boton-txt{display:inline}
  .m360-boton svg{width:18px;height:18px}
}
@media(max-width:420px){
  .m360-compartir-botones{gap:6px}
  .m360-boton{flex:1;justify-content:center;padding:11px 8px}
  .m360-boton--whatsapp{flex:2}
}