/* =========================================================
   SM REDES SOCIALES (shortcode)
   ========================================================= */

/* Contenedor */
.sm-social { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; max-width: 100%; }

/* Botón base — fondo claro */
.sm-social-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--sm-redes-box, 38px); height: var(--sm-redes-box, 38px); border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: #1a0e3d; text-decoration: none; flex: 0 0 auto; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.sm-social-btn:hover { background: #C8102E; color: #fff; transform: translateY(-2px); }

/* Iconos SVG */
.sm-social-btn svg { width: var(--sm-redes-size, 18px); height: var(--sm-redes-size, 18px); fill: currentColor; display: block; }

/* Imágenes personalizadas */
.sm-social-btn img { max-width: var(--sm-redes-size, 18px); max-height: var(--sm-redes-size, 18px); width: auto; height: auto; display: block; object-fit: contain; }

/* =========================================================
   VARIANTE: fondo oscuro
   ========================================================= */
.sm-social--dark .sm-social-btn { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.sm-social--dark .sm-social-btn:hover { background: #C8102E; color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 480px) {
	.sm-social { gap: 8px; }
}