/* Market Fortune · Boton de marca CONSISTENTE con el LOBBY del juego.
   Orden de David 2026-07-13: "los botones... no tienen la elegancia y consistencia
   con los del LOBBY, que son los que mas me gustan."
   El lobby usa el GHOST DORADO: acento/borde dorado, versalitas finas y un hover que
   RELLENA dorado con texto oscuro. Aqui vive ese lenguaje, reutilizable y unificado.

   Alcance controlado:
   - Unifica los .btn.ghost dispares del sitio (habia hasta 6 variantes: dorado, verde,
     crema, navy...) al ghost dorado del lobby.
   - Ofrece .mf-btn / .mf-btn.ghost como clase reutilizable para botones nuevos.
   NO toca el .btn solido (ya es dorado), ni el buybox/store-hero de la tienda, ni las
   fuentes ni la paleta. Solo el acento y el hover del ghost. */

:root{
  --mf-btn-oro:#c7a24a;      /* dorado de marca (plano) */
  --mf-btn-oro-alto:#e3c873; /* dorado claro (brillo) */
  --mf-btn-tinta:#17110a;    /* tinta oscura del texto sobre dorado */
}

/* --- Clase reutilizable de marca (para botones nuevos, calcada del lobby) --- */
.mf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;font-weight:600;line-height:1;
  min-height:50px;padding:14px 23px;cursor:pointer;border:1px solid var(--mf-btn-oro);
  background:linear-gradient(180deg,var(--mf-btn-oro-alto),var(--mf-btn-oro));color:var(--mf-btn-tinta);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.mf-btn:hover{transform:translateY(-1px)}
.mf-btn.ghost{background:transparent;color:var(--mf-btn-oro-alto);border-color:var(--mf-btn-oro)}
.mf-btn.ghost:hover{background:linear-gradient(180deg,var(--mf-btn-oro-alto),var(--mf-btn-oro));color:var(--mf-btn-tinta);border-color:var(--mf-btn-oro)}

/* --- Unificacion de los .btn.ghost YA EXISTENTES al ghost dorado del lobby ---
   Firma del lobby que David reconoce: borde dorado SIEMPRE + hover que rellena dorado
   con texto oscuro. Se usa a/button + !important porque hay hasta 4 definiciones inline
   en conflicto por pagina (orden de cascada impredecible). El texto BASE se deja en dorado
   claro (legible sobre fondo oscuro, que es donde vive el 95% de estos CTA). */
a.btn.ghost,button.btn.ghost{
  color:var(--mf-btn-oro-alto) !important;
  border-color:var(--mf-btn-oro) !important;
}
a.btn.ghost:hover,button.btn.ghost:hover,
a.btn.ghost:focus-visible,button.btn.ghost:focus-visible{
  background:linear-gradient(180deg,var(--mf-btn-oro-alto),var(--mf-btn-oro)) !important;
  color:var(--mf-btn-tinta) !important;
  border-color:var(--mf-btn-oro) !important;
}

/* Contexto CLARO (seccion fundador / papel): el texto base queda oscuro para contraste;
   el borde y el hover siguen siendo dorados como el lobby. */
.section.founder a.btn.ghost,.section.founder button.btn.ghost,
.on-paper a.btn.ghost,.on-paper button.btn.ghost,
.bg-paper a.btn.ghost,.bg-paper button.btn.ghost{
  color:var(--mf-btn-tinta) !important;
}