/* 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;
}

/* ===== EL DORADO DE LA APP, EN EL SITIO (David 2026-08-08) =====
   "el dorado de los botones del sitio web no tienen el mismo dorado que tiene la app,
   deberia ser el mismo efecto dorado del jugar online, no?". Tenia razon y la diferencia
   era de tres capas, medida y no percibida:
   1. El degradado. La app usa 168 grados y CINCO paradas con una curva especular: sube a
      crema, baja a #a8801f en el 79% y REPUNTA a #d8bb72 en el 100%. Ese repunte final es
      lo que el ojo lee como metal, porque imita el rebote de luz en el canto inferior de
      una pieza de laton. El sitio usaba 180 grados y DOS paradas, que son justamente el
      22% y el 54% del degradado de la app: estaba usando su tramo medio y perdiendo tanto
      el brillo alto como el fondo oscuro.
   2. El bisel. La app lo calienta (crema arriba, marron profundo abajo); el sitio usaba
      blanco puro y casi negro, mas debiles y sin temperatura. El de la app tiene volumen,
      el del sitio se veia impreso.
   3. El borde, el mas silencioso y el que mas dana: el sitio remataba con #c7a24a, que es
      EXACTAMENTE el color final de su propio degradado. Un borde del color del relleno es
      un borde invisible y deja al boton sin arista.
   Valores copiados de app/digital/mesa.html. No se toca el radio de capsula, ni la
   tipografia, ni el tamano: David pidio el dorado, no la forma. */
:root{
  --mf-grad-oro:linear-gradient(168deg,#fbf0cd 0%,#e3c873 22%,#c7a24a 54%,#a8801f 79%,#d8bb72 100%);
  --mf-bisel-oro:inset 0 1px 0 rgba(255,244,205,.55),inset 0 -1px 0 rgba(78,57,12,.6);
  --mf-oro-canto:#8a6a24;
}
a.btn:not(.ghost):not(.dark):not(.fantasma),
button.btn:not(.ghost):not(.dark):not(.fantasma),
.mf-btn:not(.ghost){
  background:var(--mf-grad-oro);
  border-color:var(--mf-oro-canto);
  box-shadow:var(--mf-bisel-oro),0 4px 12px -5px rgba(0,0,0,.8);
  color:#17110a;
}
a.btn:not(.ghost):not(.dark):not(.fantasma):hover,
button.btn:not(.ghost):not(.dark):not(.fantasma):hover,
.mf-btn:not(.ghost):hover{
  background:var(--mf-grad-oro);
  border-color:var(--mf-oro-canto);
  box-shadow:var(--mf-bisel-oro),0 8px 24px -8px rgba(230,182,70,.5);
  filter:brightness(1.06);
}

/* ===== EL RECUADRO NEGRO AL MANTENER EL CLIC (David 2026-08-09) =====
   "cuando dejo el click encima de los botones queda este error como un cuadro negro
   alrededor". Es el anillo de foco del navegador: al soltar, el boton se queda enfocado y
   Chrome le pinta su outline por defecto, que sobre negro y oro se lee como un cajon.
   LA TENTACION ES `outline:none` Y ESO ROMPE LA ACCESIBILIDAD: quien navega con teclado
   deja de ver donde esta parado. La solucion correcta es distinguir el foco del raton del
   foco del teclado, que es exactamente lo que hace :focus-visible. Con el raton no se
   pinta nada; con Tab aparece un anillo de oro que ademas se ve mejor que el del sistema. */
a.btn:focus,button.btn:focus,.mf-btn:focus,.mfc-btn:focus,
summary:focus,.pr-tab:focus,.mf-cta-bar:focus,.mf-home-buybar:focus,
input:focus,select:focus,textarea:focus{outline:none}

a.btn:focus-visible,button.btn:focus-visible,.mf-btn:focus-visible,.mfc-btn:focus-visible,
summary:focus-visible,.pr-tab:focus-visible,.mf-cta-bar:focus-visible,.mf-home-buybar:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #e3c873;
  outline-offset:3px;
  border-radius:inherit;
}
/* el <summary> de las pestañas no hereda radio y sin esto el anillo sale cuadrado */
summary:focus-visible{border-radius:4px}

/* ===== LOS DOS BOTONES DEL CIERRE, SEPARADOS (David 2026-08-09) =====
   "los botones del final de 'el simulador espera' estan muy pegados". Heredaban el gap
   general de .rule-actions, pensado para una fila de enlaces pequenos, no para dos botones
   de peso que compiten entre si. Dos CTA que se tocan se leen como uno partido. */
.mfp-cierre .rule-actions{gap:clamp(14px,2vw,22px);row-gap:14px;flex-wrap:wrap}
@media(max-width:620px){
  .mfp-cierre .rule-actions{flex-direction:column;align-items:center;gap:12px}
  .mfp-cierre .rule-actions .btn{width:min(340px,100%);justify-content:center}
}