:root{
  --guinda: #820e15;       /* guinda normal */
  --guinda-light: #a22a30; /* guinda más claro en hover */
  --btn-w: 175px;
  --icon-size: 28px;
}

.btn-guinda{
  width: var(--btn-w);
  background: var(--guinda);
  color: #fff;
  border: none;
  border-radius: 10px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1 system-ui, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  position: relative;
  overflow: visible;
  transition: background-color 0.3s ease; /* transición suave */
}

.btn-guinda:hover{
  background: var(--guinda-light); /* cambia a guinda claro */
}

.btn-guinda .icon-badge{
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  position: relative; /* necesario para mover con top */
  top: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* sombra leve */
}

.btn-guinda .icon-badge .bi{
  font-size: 16px;
  color: var(--guinda);
}
.iconpie {
  color: #fff;                /* ícono blanco */
  background-color: #820e15;  /* fondo guinda */
  border-radius: 50%;         /* opcional: fondo circular */
  padding: 8px;               /* espacio alrededor */
  font-size: 20px;            /* tamaño del ícono */
  display: inline-flex;       /* centra mejor el contenido */
  justify-content: center;
  align-items: center;
}
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
a {
	color:#900;
}
a:hover {
	color:#c00;
}