/* =============================================================
   Gap-the-Code · v3 patches
   - Escudo UCM en topbar / nav / drawer móvil / botones
   - Botón ghost-strong (mejor contraste para "Contacto" del director)
   - Botones con escudo UCM inline
   ============================================================= */

/* ===== Topbar: escudo UCM pequeño junto a "Microcredencial UCM" ===== */
.topbar__ucm-shield {
  display: inline-block;
  vertical-align: -4px;
  margin: 0 6px 0 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* ===== Nav principal (escritorio): escudo UCM al lado del texto ===== */
.nav__link-ucm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  white-space: nowrap;
}
.nav__link-ucm img {
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(68, 40, 84, 0.10));
}

/* ===== Drawer móvil: enlace microcredencial con escudo ===== */
.nav__drawer-link-ucm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
}
.nav__drawer-link-ucm img {
  flex-shrink: 0;
}

/* ===== Botones con escudo UCM inline ===== */
.btn-with-ucm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  flex-wrap: nowrap;
}
.btn-with-ucm__shield {
  display: inline-block;
  flex-shrink: 0;
  /* Fondo blanco circular sutil para resaltar el escudo sobre fondos oscuros */
  background: rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  padding: 2px;
  box-sizing: content-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ===== Eyebrow microcredencial: estilo más institucional con escudo ===== */
.micro-hero__badge--ucm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding-left: 10px !important;
}
.micro-hero__badge--ucm img {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(68, 40, 84, 0.10));
}

/* ===== btn--ghost-strong: variante con mayor contraste =====
   Usado en el botón "Contacto" de la sección Director del Método.
   Antes (.btn--ghost): texto en gris claro, casi invisible sobre fondo claro.
   Ahora: borde sutil + texto en plum + hover sólido = WCAG AA cumplido.
   ============================================================= */
.btn--ghost-strong {
  background: transparent;
  color: var(--c-plum, #782167);
  border: 1.5px solid rgba(120, 33, 103, 0.35);
  font-weight: 600;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 150ms ease;
}
.btn--ghost-strong:hover,
.btn--ghost-strong:focus-visible {
  background: var(--c-plum, #782167);
  color: #fff;
  border-color: var(--c-plum, #782167);
  transform: translateY(-1px);
}
.btn--ghost-strong:focus-visible {
  outline: 2px solid var(--c-plum, #782167);
  outline-offset: 2px;
}