/*
 * Botones y CTA.
 * Referencia: design-reference/propuesta4/index.html — cabecera ("Suscríbase",
 * "Pruebe 3 meses") y muros.
 */

.exxi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-width-strong) solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.exxi-btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.exxi-btn--primary:hover { background: var(--color-accent-dark); color: #fff; }

.exxi-btn--dark {
  background: var(--color-ink);
  color: var(--color-bg);
}
.exxi-btn--dark:hover { background: var(--color-accent); color: #fff; }

.exxi-btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.exxi-btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Un botón dentro del cuerpo del artículo sigue siendo un botón.
   `.entry-content a` (0,1,1) le ganaba a `.exxi-btn--primary` (0,1,0) y pintaba el muro
   con el texto azul sobre fondo azul —invisible— y subrayado. */
.entry-content a.exxi-btn { text-decoration: none; }
.entry-content a.exxi-btn--primary { color: #fff; }
.entry-content a.exxi-btn--primary:hover { color: #fff; }
.entry-content a.exxi-btn--dark { color: var(--color-bg); }
.entry-content a.exxi-btn--outline { color: var(--color-ink); }
.entry-content a.exxi-btn--outline:hover { color: var(--color-accent); }
.entry-content a.exxi-plan__cta { color: #fff; text-decoration: none; }

/* Deshabilitado: nunca con opacity, que vuelve translúcido el fondo y parece un bug. */
.exxi-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  border-color: var(--color-border);
}

/* Botón de conversión: planes, landings y la página de publicidad. Vive en components
   porque lo usan hojas que no siempre se cargan juntas. */
.exxi-plan__cta {
  margin-top: auto;
  align-self: stretch;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-base);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: var(--space-4) var(--space-5);
  margin-block-start: var(--space-6);
  transition: background var(--transition-fast);
}

.exxi-plan__cta:hover { background: var(--color-accent-dark); color: #fff; }