/* ---- BOTONES/CTA — compartidos por todas las páginas ---- */
.btn-enter, .config-btn, .action-btn{
  will-change:transform;
}
.btn-enter:hover, .config-btn:hover{
  box-shadow:0 0 24px var(--btn-glow-shared);
}
.btn-enter{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink);
  background:none;
  border:1px solid var(--hover-border);
  padding:16px 44px;border-radius:2px;
  cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium);
}
.btn-enter:hover{
  border-color:var(--gold);
  color:var(--gold-soft);
  box-shadow:0 0 28px var(--btn-glow-enter-hover);
}
.action-btn{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  background:none;border:1px solid var(--border);
  color:var(--muted);padding:10px 24px;
  border-radius:2px;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.action-btn:hover{border-color:var(--gold);color:var(--gold-soft);}
/* El único botón "lleno" del sitio: la acción primaria de cada pantalla.
   Todo lo demás queda en contorno — una sola jerarquía clara. */
.action-btn.primary{
  border-color:var(--gold);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  /* El fondo de este botón es siempre el paso más claro de la escala
     (--gold-soft/--gold, marfil bajo Enmienda 5) — el texto necesita el
     extremo oscuro opuesto (--void), no --ink: bajo el sistema
     monocromático --ink es también marfil (texto de cuerpo sobre fondo
     oscuro) y se volvería invisible aquí. */
  color:var(--void);font-weight:600;
  transition:border-color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.action-btn.primary:hover{
  color:var(--void);border-color:var(--gold-soft);
  box-shadow:0 0 28px var(--btn-glow-primary);
  transform:translateY(-1px);
}
/* Variante oscura del CTA primario — tinta llena en vez de degradado
   dorado. Introducida en el segundo lote de handoffs (Mi Universo, La
   Mesa, Onboarding, Carta Natal, Héroes) para las pantallas de producto
   "en vivo"; el dorado relleno queda para SEO/marketing. */
.action-btn.dark{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--void);font-weight:600;
  transition:background var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.action-btn.dark:hover{
  background:#3d352a;
  box-shadow:0 0 24px var(--btn-glow-dark);
  transform:translateY(-1px);
}
.config-btn{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:3px;
  text-transform:uppercase;
  background:none;border:1px solid var(--hover-border);
  color:var(--ink);padding:14px 44px;border-radius:2px;
  cursor:pointer;margin-top:8px;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.config-btn:hover{border-color:var(--gold);color:var(--gold-soft);}

/* .config-input — usado por varios formularios (Carta Natal, Newsletter,
   la pantalla de config de La Mesa), no solo por un sitio, por eso vive
   aquí y no en la hoja de página de quien lo usó primero. */
.config-input{
  width:360px;padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:2px;
  color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-size:13px;letter-spacing:1px;
  outline:none;
  transition:border-color var(--dur-micro) var(--ease-premium);
}
.config-input:focus{border-color:var(--gold);}
.config-input::placeholder{color:var(--muted);letter-spacing:0;}

/* Foco visible por teclado — accesibilidad, aplica a cualquier control
   interactivo nuevo o existente que use estas clases. */
.btn-enter:focus-visible, .config-btn:focus-visible, .action-btn:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
/* Estado disabled — no existía ninguna regla previa (ningún botón actual
   depende de su ausencia); puramente aditivo. */
.btn-enter:disabled, .config-btn:disabled, .action-btn:disabled{
  opacity:0.4;cursor:not-allowed;pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .btn-enter, .config-btn, .action-btn{transition:none;}
}