html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-display: swap;
}
.w3-card.w3-white p,
.w3-card.w3-white li {
  color: #444;
}

/* ================================
   LINKS: que se vean como "barras"
   ================================ */

/* En tu w3.css has cambiado w3-teal a rosa, pero w3-border-teal quedó verde.
   Lo corregimos aquí sin tocar w3.css */
.w3-border-teal {
  border-color: #D87093 !important;
}

.w3-card.w3-white strong {
  color: #555;
  font-weight: 700;
}

/* Botones tipo "pill" (como las barras redondeadas) */
.link-pill {
  border-radius: 16px !important;
  padding: 12px 16px !important;
  font-weight: 600;
}

/* Evitar el hover gris que mete W3 por defecto */
.link-pill.w3-teal:hover {
  background-color: #D87093 !important;
  color: #fff !important;
}

.link-pill.link-pill--outline:hover {
  background-color: #fff !important;
  color: #444 !important;
}

/* Links card buttons (outline) */
.btn-outline{
  background: #fff;
  border: 1px solid #D87093;
  color: #757575 !important; /* mismo gris que w3-text-grey */
}

.btn-outline i{
  color: inherit !important; /* icono en gris también */
}

.btn-outline:hover{
  background: #f1f1f1 !important;
  color: #555 !important;
}





.pill-current {
  border: 2px solid #D87093 !important; /* filo rosa */
  border-radius: 999px;

  padding: 7px 16px; /* más grande */
  font-size: 14px;   /* más grande */
  font-weight: 700;
  line-height: 1;

  background: #fff;
  color: #D87093; /* gris sobrio #757575 (cámbialo a #D87093 si lo quieres rosa) */
  vertical-align: middle;
}